/* eslint-disable camelcase */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import { Layout, Text, useTheme, Button, Card } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import FormInput from "../components/FormInput";
import ConnectButton from "../components/ConnectButton";
import GuideHeaderBar from "../components/GuideHeaderBar";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 33,
  },
  tabContent: {
    backgroundColor: "#fff",
    marginTop: 20,
  },
  img: {
    width: 100,
    height: 100,
    alignSelf: "center",
  },
  img2: {
    width: 97,
    height: 21,
    alignSelf: "center",
    marginTop: 2,
  },
  text: {
    marginTop: 16,
  },
  layoutLeft: {
    // flexDirection: "row",
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 50,
  },
  form: {
    paddingHorizontal: 26,
    paddingVertical: 20,
  },
  textareaContainer: {
    backgroundColor: "#F0F0F0",
    height: 100,
    borderRadius: 4,
  },
  textarea: {
    textAlignVertical: "top", // hack android
    fontSize: 13,
    color: "#333",
    paddingHorizontal: 14,
    paddingVertical: 10,
    height: 100,
  },
});

export default function Guide1Screen() {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { saveMerchant, checkInfo } = useModel("userModel", true);

  const {
    guide3_title1,
    guide3_title2,
    guide3_form_1,
    guide3_pla_1,
    guide3_form_2,
    guide3_pla_2,
    complete,
  } = useModel("wordsModel");
  const [aliName, changeAliName] = React.useState("");
  const [aliAccount, changeAliAccount] = React.useState("");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      checkInfo({
        aliAccountEvent: changeAliAccount,
        aliNameEvent: changeAliName,
      });
    }, [])
  );

  const canNext = React.useMemo(() => {
    if (aliAccount && aliName) {
      return true;
    }
    return false;
  }, [aliName, aliAccount]);

  return (
    <>
      <GuideHeaderBar />
      <ScrollPage>
        <Layout style={styles.container}>
          <Card appearance="headFilled">
            <Text category="s1">{guide3_title1}</Text>
            <Text category="s1">{guide3_title2}</Text>
          </Card>
          <Card appearance="formFilled">
            {/* 支付宝账号 */}
            <FormInput
              label={guide3_form_1}
              placeholder={guide3_pla_1}
              value={aliName}
              onChange={changeAliName}
              style={{ paddingVertical: 3 }}
            />
            {/* 支付宝账户名 */}
            <FormInput
              label={guide3_form_2}
              placeholder={guide3_pla_2}
              value={aliAccount}
              onChange={changeAliAccount}
              style={{ paddingVertical: 3 }}
            />

            <Layout style={styles.layoutLeft} level="1">
              <Button
                status="primary"
                disabled={!canNext}
                onPress={() => saveMerchant({ aliName, aliAccount })}
              >
                {complete}
              </Button>
            </Layout>
          </Card>
          <ConnectButton />
        </Layout>
      </ScrollPage>
    </>
  );
}