import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import { useFocusEffect, useRoute } from "@react-navigation/native";
import {
    Layout,
    Button,
    useTheme,
    Divider,
    Input,
    Text,
} from "@ui-kitten/components";

import NavHeaderBar from "../../components/NavHeaderBar";
import BankCard from "../../components/BankCard";

const styles = StyleSheet.create({
    list: {
        flex: 1,
        backgroundColor: "#EEEEEE",
        paddingVertical: 7,
    },
    separatorStyle: {
        height: 6,
        backgroundColor: "#EEEEEE",
    },
    subBtn: {
        paddingHorizontal: 15,
        paddingVertical: 20,
        width: "100%",
        position: "absolute",
        bottom: 90,
        left: 0,
        backgroundColor: "transparent",
    },
    input: {
        marginTop: 7,
        paddingTop: 10,
        paddingHorizontal: 13,
        paddingBottom: 28,
    },
    left: {
        fontWeight: "normal",
        marginRight: 18,
    },
});


export default function RechargeScreen({ navigation }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const {
      rechargeBtnText,
      ORHSFG,
      WITHDRAW,
      applySuccess,
      BJGTHA,
      BIZQHZ,
    } = useModel("wordsModel");
    const { getUserInfo, money } = useModel("appUserModel");
    const { httpPost, httpGet } = useModel("httpModel", true);
    const { success } = useModel("loadingModel");
    const [bankCardId, setBankCardId] = React.useState();
    const [bankCradInfo, setBankCradInfo] = React.useState({});
    const [value, setVal] = React.useState("");
    const route = useRoute();

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
            const { params } = route;
            const { selectId } = params || {};
            if (selectId) {
                setBankCardId(selectId);
            }
            getUserInfo();
        }, [])
    );

    React.useEffect(() => {
        if (bankCardId) {
            httpGet(`/bankCard/get/${bankCardId}`).then(res => {
                setBankCradInfo(res);
            });
        } else {
            setBankCradInfo({});
        }
    }, [bankCardId]);

    

    const canSubmit = React.useMemo(() => {
        const value1 = Number(value);
        if (bankCardId && value1 && value1 <= (money || 0)) {
            return true;
        } 
            return false;
        
    }, [value, bankCardId]);

    const showMoeny = React.useMemo(() => {
        if (money) {
            return money.toFixed(2);
        } 
            return "0.00";
    }, [money]);

    function submit() {
        const value1 = Number(value);
        httpPost(
            "/withdrawApply/apply",
            {
                amount: value1,
                bankCardId,
            },
            {},
            true
        ).then(res => {
            success(applySuccess);
            navigation.replace("RechargeDetail", {
                id: res.id,
            });
        });
    }

    return (
      <>
        <NavHeaderBar title={WITHDRAW} />
        <Divider style={styles.separatorStyle} />
        <BankCard
          type="edit"
          pressEvent={() => {
            navigation.navigate("ChooseBank");
          }}
          info={bankCradInfo}
        />

        <Layout style={styles.input}>
          <Input
            appearance="reCharge"
            label={ORHSFG}
            value={value}
            accessoryLeft={() => (
              <Text category="h2" style={styles.left}>
                ¥
              </Text>
            )}
            caption={`${BIZQHZ}${showMoeny}${BJGTHA}`}
            keyboardType="numeric"
            onChangeText={text => {
              setVal(text);
            }}
            onBlur={() => {
              const value1 = Number(value);
              if (value1 > (money || 0)) {
                setVal(showMoeny);
              } else {
                setVal(value1.toFixed(2));
              }
            }}
          />
        </Layout>

        <Layout style={styles.subBtn}>
          <Button disabled={!canSubmit} onPress={submit}>
            {rechargeBtnText}
          </Button>
        </Layout>
      </>
    );
}