/* eslint-disable no-underscore-dangle */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import { useModel, setModel } from "flooks";
import { useTheme, Text, Button, Layout } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import verifiedModel from "../../models/verifiedModel";
import NavHeaderBar from "../../components/NavHeaderBar";
import UpLoadImage from "../../components/UpLoadImage";
import FormInput from "../../components/FormInput";
import ListUtil from "../../Utils/ListUtil";
import ScrollPage from "../../components/ScrollPage";

setModel("verifiedModel", verifiedModel);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
    paddingBottom: 33,
    paddingHorizontal: 20,
  },
  imgList: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
  imgList2: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
  },
  imgItem: {
    paddingVertical: 10,
    alignItems: "center",
  },
  imgItem2: {
    paddingVertical: 10,
    alignItems: "center",
    marginRight: 20,
  },
  text: {
    paddingVertical: 15,
  },
  btn: {
    marginVertical: 30,
    alignItems: "center",
  },
  tips: {
    paddingVertical: 20,
    paddingHorizontal: 40,
  },
});

export default function StoreScreen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel", true);
  const {
    mid,
    registerInfo,
    userInfo,
    updateMerchant,
    changeRegisterInfo,
  } = useModel("userModel");
  const {
    WVWTVK,
    KMXEBK,
    RGKJPS,
    FQIZGN,
    HMBWUJ,
    MSEUAP,
    ONBSYL,
    NOMPAT,
    YBCDKV,
  } = useModel("wordsModel");
  const { success, loading } = useModel("loadingModel", true);

  const [doorHeadImg, setDoorHeadImg] = React.useState("");
  const [img1, setImg1] = React.useState("");
  const [img2, setImg2] = React.useState("");
  const [img3, setImg3] = React.useState("");
  const [img4, setImg4] = React.useState("");
  const [img5, setImg5] = React.useState("");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      if (mid) {
        setDoorHeadImg(userInfo.doorHeadImg || "");
        const imgList = new ListUtil(userInfo.img || "");
        imgList.setImgVal([setImg1, setImg2, setImg3, setImg4, setImg5]);
      } else {
        setDoorHeadImg(registerInfo.doorHeadImg || "");
        const imgList = new ListUtil(registerInfo.img || "");
        imgList.setImgVal([setImg1, setImg2, setImg3, setImg4, setImg5]);
      }
    }, [])
  );

  const canSubmit = React.useMemo(() => {
    if (doorHeadImg && (img1 || img2 || img3 || img4 || img5)) {
      return true;
    }
    return false;
  }, [doorHeadImg, img1, img2, img3, img4, img5]);

  function submit() {
    const imgList = new ListUtil([img1, img2, img3, img4, img5]);

    if (mid) {
      loading();
      updateMerchant({
        doorHeadImg,
        img: imgList.getListValue(),
      }).then(() => {
        success("设置成功");
        navigation.goBack();
      });
    } else {
      changeRegisterInfo({
        doorHeadImg,
        img: imgList.getListValue(),
      });
      success("设置成功");
      navigation.goBack();
    }
  }

  return (
    <>
      <NavHeaderBar title={YBCDKV} />
      <ScrollPage>
        <Layout style={styles.container}>
          <FormInput
            key="doorHeadImg"
            label={FQIZGN}
            type="label"
            textAlign="right"
            style={{ paddingVertical: 5 }}
            labelStyle={{ width: 100 }}
          />
          <View style={styles.imgList}>
            <View style={styles.imgItem}>
              <UpLoadImage
                key="handheldIdNo"
                value={doorHeadImg}
                changeIcon={setDoorHeadImg}
                size={67}
                aspect={[1, 1]}
              />
            </View>
          </View>

          <FormInput
            key="img"
            label={RGKJPS}
            type="label"
            textAlign="right"
            style={{ paddingVertical: 5 }}
            labelStyle={{ width: 200 }}
          />
          <View style={styles.imgList2}>
            <View style={styles.imgItem2}>
              <UpLoadImage
                key="img1"
                value={img1}
                changeIcon={setImg1}
                size={67}
                aspect={[1, 1]}
              />
            </View>
            <View style={styles.imgItem2}>
              <UpLoadImage
                key="img2"
                value={img2}
                changeIcon={setImg2}
                size={67}
                aspect={[1, 1]}
              />
            </View>

            <View style={styles.imgItem2}>
              <UpLoadImage
                key="img3"
                value={img3}
                changeIcon={setImg3}
                size={67}
                aspect={[1, 1]}
              />
            </View>
            <View style={styles.imgItem2}>
              <UpLoadImage
                key="img4"
                value={img4}
                changeIcon={setImg4}
                size={67}
                aspect={[1, 1]}
              />
            </View>
            <View style={styles.imgItem2}>
              <UpLoadImage
                key="img5"
                value={img5}
                changeIcon={setImg5}
                size={67}
                aspect={[1, 1]}
              />
            </View>
          </View>

          <View style={styles.btn}>
            <Button onPress={submit} disabled={!canSubmit}>
              {WVWTVK}
            </Button>
          </View>
        </Layout>
        <View style={styles.tips}>
          <Text category="c1" status="info">
            {KMXEBK}
          </Text>
          <Text category="c1" status="info">
            {ONBSYL}
          </Text>
          <Text category="c1" status="info">
            {NOMPAT}
          </Text>
          <Text category="c1" status="info">
            {HMBWUJ}
          </Text>
          <Text category="c1" status="info">
            {MSEUAP}
          </Text>
        </View>
      </ScrollPage>
    </>
  );
}