/* eslint-disable no-shadow */
/* eslint-disable camelcase */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { useModel } from "flooks";
import { StyleSheet } from "react-native";
import {
  Layout,
  Text,
  useTheme,
  Button,
  Card,
  SelectItem,
  Icon,
} from "@ui-kitten/components";
import { Div } from "react-native-magnus";

// import { useFocusEffect } from "@react-navigation/native";
import { useMount } from "@umijs/hooks";

import ScrollPage from "../components/ScrollPage";
import FormInput from "../components/FormInput";
import ConnectButton from "../components/ConnectButton";
import GuideHeaderBar from "../components/GuideHeaderBar";
import * as RootNavigation from "../navigation/RootNavigation";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 33,
  },
  tabContent: {
    backgroundColor: "#fff",
    marginTop: 20,
  },
  logo: {
    width: 100,
    height: 100,
    alignSelf: "center",
  },
  logo2: {
    width: 97,
    height: 21,
    alignSelf: "center",
    marginTop: 2,
  },
  text: {
    marginTop: 16,
  },
  layoutLeft: {
    flexDirection: "row",
    paddingVertical: 10,
    justifyContent: "center",
  },
  form: {
    paddingHorizontal: 26,
    paddingVertical: 20,
  },
});

const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;

export default function RegisterScreen() {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { httpGet } = useModel("httpModel", true);
  const { mid, registerSecend, registerInfo, userInfo, checkAgain } = useModel(
    "userModel"
  );
  const { verifiedInfo, registerVerifiedInfo } = useModel("verifiedModel");
  const {
    guideHome_title1,
    guideHome_title2,
    guideHome_form_1,
    guideHome_form_2,
    guideHome_form_4,
    guideHome_form_5,
    guideHome_form_6,
    guideHome_form_7,
    // guideHome_pla_2,
    guideHome_pla_3,
    next,
    TTBMND,
    TVZBVQ,
  } = useModel("wordsModel");
  const [categoryList, changeCategoryList] = React.useState([]);
  const [merchantNatureList, changeMerchantNatureList] = React.useState([]);
  const [qualification, changeQualification] = React.useState("");
  useMount(() => {
    changeBackground(theme["color-primary-500"]);
    httpGet("/category/tree", { id: 1 }).then(res => {
      changeCategoryList(res);
    });

    httpGet("/merchantNature/all").then(res => {
      changeMerchantNatureList(res.content);
    });
  });

  const [category, changeCategory] = React.useState("");
  const [address, changeAddress] = React.useState("");
  const [week, changeWeek] = React.useState("");
  const [startTime, changeStartTime] = React.useState("08:00:00");
  const [endTime, changeEndTime] = React.useState("22:00:00");
  const [merchantNatureId, changeMerchantNatureId] = React.useState("");
  const [logo, changeLogo] = React.useState();
  const [doorHeadImg, changeDoorHeadeImg] = React.useState("");
  const [img, changeImg] = React.useState("");

  // 法人信息
  const [realName, setRealName] = React.useState("");
  const [idNo, setIdNo] = React.useState("");
  const [idNoImg, setIdNoImg] = React.useState("");
  const [handheldIdNo, setHandheldIdNo] = React.useState("");

  React.useEffect(() => {
    if (registerVerifiedInfo && registerVerifiedInfo.realName) {
      setRealName(registerVerifiedInfo.realName);
    }
    if (registerVerifiedInfo && registerVerifiedInfo.idNo) {
      setIdNo(registerVerifiedInfo.idNo);
    }
    if (registerVerifiedInfo && registerVerifiedInfo.idNoImg) {
      setIdNoImg(registerVerifiedInfo.idNoImg);
    }
    if (registerVerifiedInfo && registerVerifiedInfo.handheldIdNo) {
      setHandheldIdNo(registerVerifiedInfo.handheldIdNo);
    }
    if (verifiedInfo && verifiedInfo.realName) {
      setRealName(verifiedInfo.realName);
    }
    if (verifiedInfo && verifiedInfo.idNo) {
      setIdNo(verifiedInfo.idNo);
    }
    if (verifiedInfo && verifiedInfo.idNoImg) {
      setIdNoImg(verifiedInfo.idNoImg);
    }
    if (verifiedInfo && verifiedInfo.handheldIdNo) {
      setHandheldIdNo(verifiedInfo.handheldIdNo);
    }
  }, [registerVerifiedInfo, verifiedInfo]);

  React.useEffect(() => {
    if (registerInfo && registerInfo.qualification) {
      changeQualification(registerInfo.qualification);
    }
    if (registerInfo && registerInfo.doorHeadImg) {
      changeDoorHeadeImg(registerInfo.doorHeadImg);
    }
    if (registerInfo && registerInfo.img) {
      changeImg(registerInfo.img);
    }
    if (registerInfo && registerInfo.address) {
      changeAddress(registerInfo.address);
    }
  }, [registerInfo]);

  React.useEffect(() => {
    if (mid) {
      if (userInfo.category.length > 0) {
        changeCategory(userInfo.category[0].id);
      }
      changeAddress(userInfo.address);
      changeWeek(userInfo.week);
      changeLogo(userInfo.logo);
      changeMerchantNatureId(userInfo.merchantNatureId);
      changeStartTime(userInfo.startTime);
      changeEndTime(userInfo.endTime);
      changeQualification(userInfo.qualification);
      changeDoorHeadeImg(userInfo.doorHeadImg);
      changeImg(userInfo.img);
    }
  }, [userInfo]);

  const timeValue = React.useMemo(() => {
    if (week && startTime && endTime) {
      return `${week} ${startTime}~${endTime}`;
    }
    return " ";
  }, [week, startTime, endTime]);

  const canNext = React.useMemo(() => {
    if (
      category &&
      address &&
      merchantNatureId &&
      logo &&
      week &&
      startTime &&
      endTime &&
      doorHeadImg &&
      img &&
      realName &&
      idNo &&
      idNoImg &&
      handheldIdNo &&
      qualification
    ) {
      return true;
    }
    return false;
  }, [
    category,
    address,
    merchantNatureId,
    logo,
    week,
    startTime,
    endTime,
    doorHeadImg,
    img,
    realName,
    idNo,
    idNoImg,
    handheldIdNo,
    qualification,
  ]);

  return (
    <>
      <GuideHeaderBar />
      <ScrollPage>
        <Layout style={styles.container}>
          {mid === 0 && (
            <Card appearance="headFilled">
              <Text category="s1">{guideHome_title1}</Text>
              <Text category="s1">{guideHome_title2}</Text>
            </Card>
          )}

          <Card appearance="formFilled">
            {/* 输入商家名称 */}
            <FormInput
              label={guideHome_form_1}
              selectTitle={guideHome_form_1}
              type="select"
              value={category}
              onChange={changeCategory}
              textAlign="right"
              selectList={categoryList}
              style={{ paddingVertical: 5 }}
            />

            {/* <FormInput
              label={guideHome_form_2}
              value={address}
              onChange={changeAddress}
              textAlign="right"
            /> */}

            <FormInput
              label={guideHome_form_2}
              type="url"
              value={address || " "}
              textAlign="right"
              style={{ paddingVertical: 5 }}
              changePath={() => {
                RootNavigation.navigate("SearchMap");
              }}
            />

            <FormInput
              label={guideHome_form_4}
              selectTitle={guideHome_form_4}
              type="openTime"
              week={week}
              startTime={startTime}
              endTime={endTime}
              onChange={(week, startTime, endTime) => {
                changeWeek(week);
                changeStartTime(startTime);
                changeEndTime(endTime);
              }}
              textAlign="right"
              style={{ paddingVertical: 5 }}
            />

            <FormInput
              label={guideHome_form_5}
              type="url"
              value={qualification ? TVZBVQ : " "}
              textAlign="right"
              style={{ paddingVertical: 5 }}
              changePath={() => {
                RootNavigation.navigate("Qualification");
              }}
            />

            <FormInput
              label="门店信息"
              type="url"
              value={doorHeadImg && img ? TVZBVQ : " "}
              textAlign="right"
              style={{ paddingVertical: 5 }}
              changePath={() => {
                RootNavigation.navigate("Store");
              }}
            />

            <FormInput
              label="法人信息"
              type="url"
              value={realName && idNo && idNoImg && handheldIdNo ? TVZBVQ : " "}
              textAlign="right"
              style={{ paddingVertical: 5 }}
              changePath={() => {
                RootNavigation.navigate("LegalPerson");
              }}
            />

            <FormInput
              label={guideHome_form_6}
              sub={guideHome_pla_3}
              selectTitle={guideHome_form_6}
              type="select"
              value={merchantNatureId}
              textAlign="right"
              style={{ paddingVertical: 5 }}
              onChange={changeMerchantNatureId}
              selectList={merchantNatureList}
            />

            <FormInput
              label={guideHome_form_7}
              type="img"
              value={logo}
              textAlign="right"
              onChange={changeLogo}
            />
            <Layout style={styles.layoutLeft} level="1">
              {mid !== 0 ? (
                <Button
                  status="primary"
                  disabled={!canNext}
                  onPress={() => {
                    const categorys = [...categoryList].filter(item => {
                      return item.id === category;
                    });
                    checkAgain({
                      category: categorys,
                      address,
                      week,
                      startTime,
                      endTime,
                      qualification,
                      merchantNatureId,
                      logo,
                    });
                  }}
                >
                  {TTBMND}
                </Button>
              ) : (
                <Button
                  status="primary"
                  disabled={!canNext}
                  onPress={() =>
                    registerSecend({
                      category,
                      address,
                      week,
                      startTime,
                      endTime,
                      qualification,
                      merchantNatureId,
                      logo,
                      img,
                      doorHeadImg,
                    })
                  }
                >
                  {next}
                </Button>
              )}
            </Layout>
          </Card>
          <ConnectButton />
        </Layout>
      </ScrollPage>
    </>
  );
}