/* eslint-disable camelcase */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet, Image } from "react-native";
import {
    Layout,
    useTheme,
    Icon,
    Divider,
    Text,
} from "@ui-kitten/components";
import { useModel } from "flooks";
import { useFocusEffect, useRoute } from "@react-navigation/native";
import moment from "moment";
import NavHeaderBar from "../../components/NavHeaderBar";
import ScrollPage from "../../components/ScrollPage";


const styles = StyleSheet.create({
    top: {
        flexDirection: "row",
        alignItems: "center",
        paddingTop: 7,
        paddingLeft: 30,
        paddingRight: 56,
    },
    image: {
        width: 66,
        height: 66,
        flexShrink: 0,
    },
    icon: {
        width: 33,
        height: 33,
        flexShrink: 0,
    },
    line: {
        flex: 1,
        height: 2,
    },
    activeLine: {
        backgroundColor: "#FFC21C",
    },
    errorLine: {
        backgroundColor: "#F15A3C",
    },
    tips: {
        paddingBottom: 11,
        alignItems: "center",
    },
    form: {
        marginTop: 7,
        paddingVertical: 20,
        paddingHorizontal: 13,
    },
    item: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 10,
    },
    name: {
        color: "#787878",
    },
});



const img1=require("../../assets/images/logo_1.png")
const img2=require("../../assets/images/apply2.png")


export default function RechargeDetailScreen() {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const {
        WITHDRAW,
        Apply_SUCCESS,
        Apply_PENDING,
        Apply_FAIL,
        rechargeTime,
        rechargeTitle2,
        rechargeTitle3,
    } = useModel("wordsModel");
    const {  httpGet } = useModel("httpModel", true);
    // const {  } = useModel("loadingModel");
    const [applyInfo, setApplyInfo] = React.useState({});
    const route = useRoute();

    const { amount, bankCard,  status, withdrawTime } = applyInfo;

    const { bankName, cardNo } = bankCard || {};

    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
        }, [])
    );

    const showTip = React.useMemo(() => {
        if (status === "SUCCESS") {
            return Apply_SUCCESS;
        } if (status === "FAIL") {
            return Apply_FAIL;
        } 
            return Apply_PENDING;
        
    }, [Apply_SUCCESS, Apply_PENDING, Apply_FAIL]);

    const getTime = React.useMemo(() => {
        if (withdrawTime) {
            return moment(withdrawTime, "YYYY-MM-DD HH:mm:ss")
                .add(2, "hours")
                .format("YYYY-MM-DD HH:mm:ss");
        } 
            return "";
        
    }, [withdrawTime]);

    const showBankInfo = React.useMemo(() => {
        if (bankName && cardNo) {
            return (
                `${bankName 
                } (${ 
                cardNo.length > 5
                    ? cardNo.substr(cardNo.length - 5, 4)
                    : cardNo.substr(0, cardNo.length) 
                })`
            );
        } 
            return "";
        
    }, [bankName, cardNo]);

    function refreshEvent() {
        const { params } = route;
        const { id } = params || {};
        return httpGet(`/withdrawApply/get/${  id}`, {}, true).then(res => {
            setApplyInfo(res);
        });
    }

    return (
      <>
        <NavHeaderBar title={WITHDRAW} />
        <ScrollPage enabledFresh refreshEvent={refreshEvent}>
          <Layout style={styles.top}>
            <Image
              source={img1}
              style={styles.image}
            />
            <Divider style={[styles.line, styles.activeLine]} />
            <Image
              source={img2}
              style={styles.icon}
            />
            {status === "SUCCESS" ? (
              <Divider style={[styles.line, styles.activeLine]} />
                    ) : status === "FAIL" ? (
                      <Divider style={[styles.line, styles.errorLine]} />
                    ) : (
                      <Divider style={[styles.line]} />
                    )}

            {status === "SUCCESS" ? (
              <Icon
                fill='#FFC21C'
                name='checkmark-circle-2'
                style={styles.icon}
              />
                    ) : status === "FAIL" ? (
                      <Icon
                        fill='#F15A3C'
                        name='checkmark-circle-2'
                        style={styles.icon}
                      />
                    ) : (
                      <Icon
                        fill='#EEEEEE'
                        name='checkmark-circle-2'
                        style={styles.icon}
                      />
                    )}
          </Layout>
          <Layout style={styles.tips}>
            <Text>{showTip}</Text>
          </Layout>

          <Layout style={styles.form}>
            {getTime !== "" && (
            <Layout style={styles.item}>
              <Text style={styles.name}>{rechargeTime}</Text>
              <Text>{getTime}</Text>
            </Layout>
                    )}

            <Layout style={styles.item}>
              <Text style={styles.name}>{rechargeTitle2}</Text>
              <Text>{showBankInfo}</Text>
            </Layout>
            <Layout style={styles.item}>
              <Text style={styles.name}>{rechargeTitle3}</Text>
              <Text>
                ¥
                {amount}
              </Text>
            </Layout>
          </Layout>
        </ScrollPage>
      </>
    );
}