Dingdong_app/screens/Attestation/LegalPersonScreen.js

/* 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, Layout } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
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";

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

export default function LegalPersonScreen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel", true);
  const { mid } = useModel("userModel");
  const { success } = useModel("loadingModel", true);

  const {
    GCXGVF,
    MSEUAP,
    LUPPEG,
    TWWYNY,
    OXLQHX,
    AZWBTB,
    AZMDQP,
    SARAST,
    NIOXWF,
    KYPQJQ,
    WVWTVK,
    KMXEBK,
    ONBSYL,
    NOMPAT,
    HMBWUJ,
    DTEOMV,
  } = useModel("wordsModel");

  const {
    getVerfied,
    verifiedInfo,
    registerVerifiedInfo,
    saveVeriFied,
  } = useModel("verifiedModel");

  const [realName, setRealName] = React.useState("");
  const [idNo, setIdNo] = React.useState("");
  const [idNoImgBefore, setIdNoImgBefore] = React.useState("");
  const [idNoImgAfter, setIdNoImgAfter] = React.useState("");
  const [handheldIdNo, setHandheldIdNo] = React.useState("");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      getVerfied().then(() => {
        if (mid) {
          setRealName(verifiedInfo.realName || "");
          setIdNo(verifiedInfo.idNo || "");
          const _imgList = new ListUtil(verifiedInfo.idNoImg || "");
          _imgList.getOneTow(setIdNoImgBefore, setIdNoImgAfter);
          setHandheldIdNo(verifiedInfo.handheldIdNo || "");
        } else {
          setRealName(registerVerifiedInfo.realName || "");
          setIdNo(registerVerifiedInfo.idNo || "");
          const _imgList = new ListUtil(registerVerifiedInfo.idNoImg || "");
          _imgList.getOneTow(setIdNoImgBefore, setIdNoImgAfter);
          setHandheldIdNo(registerVerifiedInfo.handheldIdNo || "");
        }
      });
    }, [])
  );

  const canSubmit = React.useMemo(() => {
    if (realName && idNo && idNoImgBefore && idNoImgAfter && handheldIdNo) {
      return true;
    }
    return false;
  }, [realName, idNo, idNoImgBefore, idNoImgAfter, handheldIdNo]);

  function submit() {
    const _imgList = new ListUtil([idNoImgBefore, idNoImgAfter]);
    const idNoImg = _imgList.getListValue();
    saveVeriFied({ realName, idNo, idNoImg, handheldIdNo }).then(() => {
      success(DTEOMV);
      navigation.goBack();
    });
  }

  return (
    <>
      <NavHeaderBar title={GCXGVF} />
      <ScrollPage>
        <Layout style={styles.container}>
          <FormInput
            key="realName"
            label={LUPPEG}
            placeholder={TWWYNY}
            value={realName}
            onChange={setRealName}
            textAlign="right"
            style={{ paddingVertical: 5 }}
            labelStyle={{ width: 100 }}
          />
          <FormInput
            key="idNo"
            label={OXLQHX}
            placeholder={AZWBTB}
            value={idNo}
            onChange={setIdNo}
            textAlign="right"
            style={{ paddingVertical: 5 }}
            labelStyle={{ width: 100 }}
          />
          <FormInput
            key="before"
            label={AZMDQP}
            type="label"
            textAlign="right"
            style={{ paddingVertical: 5 }}
            labelStyle={{ width: 100 }}
          />

          <View style={styles.imgList}>
            <View style={styles.imgItem}>
              <UpLoadImage
                key="before"
                value={idNoImgBefore}
                changeIcon={setIdNoImgBefore}
                size={67}
                aspect={[1, 1]}
              />
              <Text category="c1" status="info" style={styles.text}>
                {SARAST}
              </Text>
            </View>
            <View style={styles.imgItem}>
              <UpLoadImage
                key="after"
                value={idNoImgAfter}
                changeIcon={setIdNoImgAfter}
                size={67}
                aspect={[1, 1]}
              />
              <Text category="c1" status="info" style={styles.text}>
                {NIOXWF}
              </Text>
            </View>
          </View>
          <FormInput
            key="handheldIdNo"
            label={KYPQJQ}
            type="label"
            textAlign="right"
            style={{ paddingVertical: 5 }}
            labelStyle={{ width: 100 }}
          />
          <View style={styles.imgList}>
            <View style={styles.imgItem}>
              <UpLoadImage
                key="handheldIdNo"
                value={handheldIdNo}
                changeIcon={setHandheldIdNo}
                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>
    </>
  );
}