/* 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 } from "flooks";
import { useTheme, Text, Button } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import NavHeaderBar from "../../components/NavHeaderBar";
import UpLoadImage from "../../components/UpLoadImage";
import ListUtil from "../../Utils/ListUtil";

const styles = StyleSheet.create({
  imgList: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
  imgItem: {
    paddingVertical: 30,
  },
  text: {
    paddingVertical: 15,
  },
  btn: {
    marginVertical: 30,
    alignItems: "center",
  },
});

export default function QualificationScreen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel", true);
  const {
    mid,
    registerInfo,
    userInfo,
    updateMerchant,
    changeRegisterInfo,
  } = useModel("userModel");
  const { XKTKDO, WCTSUL, confirm, RKMZQB } = useModel("wordsModel");
  const { success } = useModel("loadingModel", true);

  const [beforeImg, changeBeforeImg] = React.useState("");
  const [afterImg, changeAfterImg] = React.useState("");

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      if (mid) {
        const imgList = new ListUtil(userInfo.qualification || "");
        imgList.getOneTow(changeBeforeImg, changeAfterImg);
      } else {
        const imgList = new ListUtil(registerInfo.qualification || "");
        imgList.getOneTow(changeBeforeImg, changeAfterImg);
      }
    }, [])
  );

  const canSubmit = React.useMemo(() => {
    if (beforeImg && afterImg) {
      return true;
    }
    return false;
  }, [beforeImg, afterImg]);

  function submit() {
    if (mid) {
      const _qualification = new ListUtil([beforeImg, afterImg]);
      updateMerchant({
        qualification: _qualification.getListValue(),
      }).then(() => {
        success("设置成功");
        navigation.goBack();
      });
    } else {
      const _qualification = new ListUtil([beforeImg, afterImg]);
      changeRegisterInfo({
        qualification: _qualification.getListValue(),
      });
      success("设置成功");
      navigation.goBack();
    }
  }

  return (
    <>
      <NavHeaderBar title={WCTSUL} />
      <View style={styles.imgList}>
        <View style={styles.imgItem}>
          <UpLoadImage
            key="before"
            value={beforeImg}
            changeIcon={changeBeforeImg}
            size={67}
            aspect={[1, 1]}
          />
          <Text category="c1" style={styles.text}>
            {RKMZQB}
          </Text>
        </View>
        <View style={styles.imgItem}>
          <UpLoadImage
            key="after"
            value={afterImg}
            changeIcon={changeAfterImg}
            size={67}
            aspect={[1, 1]}
          />
          <Text category="c1" style={styles.text}>
            {XKTKDO}
          </Text>
        </View>
      </View>

      <View style={styles.btn}>
        <Button onPress={submit} disabled={!canSubmit}>
          {confirm}
        </Button>
      </View>
    </>
  );
}