/* eslint-disable camelcase */
/* eslint-disable no-undef */
/* eslint-disable no-shadow */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";
import {
    Layout,
    Button,
    useTheme,
    Radio,
} from "@ui-kitten/components";
import FormInput from "../../components/FormInput";
import NavHeaderBar from "../../components/NavHeaderBar";



const styles = StyleSheet.create({
    form: {
        paddingHorizontal: 10,
    },
    radio: {
        paddingVertical: 15,
        paddingHorizontal: 15,
    },
    btn: {
        marginHorizontal: 15,
        marginVertical: 10,
    },
});

export default function BankScreen({ navigation, route }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const {
       bindBankText1,
        bankTitle1,
        bankTitle2,
        bankTitle3,
        bankTitle4,
        register_form_4,
        bankPla1,
        bankPla2,
        bankPla3,
        bankPla4,
        register_pla_4,
        login_form_3,
        login_pla_3,
        bankTitle5,
        next,
        successText,
        add,
        confirm,
        delText,
    } = useModel("wordsModel");
    const { httpPost, httpGet } = useModel("httpModel", true);
    const { userId } = useModel("userModel");
    const { success } = useModel("loadingModel");
    const { removeEvent } = useModel("dialogModel", true);
    const [id, setId] = React.useState(0);
    const [prePage, setPrePage] = React.useState("Bank");

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            const { params } = route;
            const { id, pageName } = params || {};
            if (id) {
                setId(id);
            }
            if (pageName) {
                setPrePage(pageName);
            }
        }, [])
    );

    const [bankName, changeBankName] = React.useState("");
    const [cardNo, changeCardId] = React.useState("");
    const [realName, changeRealName] = React.useState("");
    const [idNo, changeIdNo] = React.useState("");
    const [phone, changePhone] = React.useState("");
    const [code, changeCode] = React.useState("");
    const [checked, setChecked] = React.useState(true);

    React.useEffect(() => {
        if (id) {
            httpGet(`/bankCard/get/${id}`, {}, true).then(res => {
                function getVal(value) {
                    return value || "";
                }
                changeBankName(getVal(res.bankName));
                changeCardId(getVal(res.cardNo));
                changeRealName(getVal(res.realName));
                changeIdNo(getVal(res.idNo));
                changePhone(getVal(res.phone));
                // changeCode(getVal(res.code));
            });
        }
    }, [id]);

    const canNext = React.useMemo(() => {
        if (
            bankName &&
            cardNo &&
            realName &&
            idNo &&
            phone &&
            (code || id) &&
            checked
        ) {
            return true;
        } 
            return false;
        
    }, [bankName, cardNo, realName, idNo, phone, code, checked, id]);

    const submit = () => {
        httpPost(
            "/bankCard/save",
            {
                id: id || "",
                bankName,
                cardNo,
                realName,
                idNo,
                phone,
                code,
                userId,
            },
            {
                body: "json",
            },
            true
        ).then(res => {
            success(add + successText);
            const query = {};
            if (prePage === "reCharge") {
                query.selectId = res.id;
            }
            navigation.navigate(prePage, query);
        });
    };

    const remove = () => {
        removeEvent(() => {
            httpPost(`/bankCard/del/${  id}`, {}, true).then(() => {
                success(delText + successText);
                navigation.navigate(prePage);
            });
        });
    };

    return (
      <>
        <NavHeaderBar title={bindBankText1} />

        <Layout style={styles.form}>
          {/* 银行 */}
          <FormInput
            appearance='inner'
            label={bankTitle1}
            placeholder={bankPla1}
            value={bankName}
            onChange={changeBankName}
          />
          {/* 银行卡 */}
          <FormInput
            appearance='inner'
            label={bankTitle2}
            placeholder={bankPla2}
            value={cardNo}
            onChange={changeCardId}
          />
          {/* 姓名 */}
          <FormInput
            appearance='inner'
            label={bankTitle3}
            placeholder={bankPla3}
            value={realName}
            onChange={changeRealName}
          />
          {/* 身份证号 */}
          <FormInput
            appearance='inner'
            label={bankTitle4}
            placeholder={bankPla4}
            value={idNo}
            onChange={changeIdNo}
          />
          {/* 手机号 */}
          <FormInput
            appearance='inner'
            type='phone'
            label={register_form_4}
            placeholder={register_pla_4}
            value={phone}
            onChange={changePhone}
          />
          {/* 验证码 */}
          {id === 0 && (
            <FormInput
              appearance='inner'
              type='code'
              label={login_form_3}
              placeholder={login_pla_3}
              value={code}
              onChange={changeCode}
              btnText='发送验证码'
            />
                )}
        </Layout>
        {id === 0 && (
        <Radio
          style={styles.radio}
          checked={checked}
          onChange={nextChecked => setChecked(nextChecked)}
        >
          {bankTitle5}
        </Radio>
            )}

        <Button style={styles.btn} disabled={!canNext} onPress={submit}>
          {prePage === "reCharge" ? next : confirm}
        </Button>
        {id !== 0 && (
        <Button appearance='ghost' status='info' onPress={remove}>
          {delText}
        </Button>
            )}
      </>
    );
}