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,
  TopNavigationAction,
  Icon,
  Divider,
} from "@ui-kitten/components";
import NavHeaderBar from "../../components/NavHeaderBar";
import ListComponent from "../../components/ListComponent";
import BankCard from "../../components/BankCard";

const PlusIcon = props => <Icon {...props} fill="#fff" name="plus" />;

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",
  },
});

export default function BankScreen({ navigation, route }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { userTitle62, CWNZNO, ALI_PAY, bankMainTitle, next } = useModel(
    "wordsModel"
  );
  const { aliAccount } = useModel("userModel");
  // const {  } = useModel("dialogModel");
  const { httpGet } = useModel("httpModel", true);
  const [pageName, setPageName] = React.useState("Bank");
  const [selectId, setSelectId] = React.useState();
  const [showList, changeShow] = React.useState(false);

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      const { name } = route;
      setPageName(name);
    }, [])
  );
  function getList(page, size) {
    return httpGet("/bankCard/my", { page, size }, true);
  }

  const renderItem = ({ item, index }) => (
    <BankCard
      key={index}
      info={item}
      type={pageName === "Bank" ? "edit" : "choose"}
      selectId={selectId}
      pressEvent={() => {
        if (pageName === "Bank") {
          navigation.navigate("AddBank", {
            id: item.id,
            pageName,
          });
        } else {
          setSelectId(item.id);
        }
      }}
    />
  );

  const aliAccountNo = React.useMemo(() => {
    if (aliAccount && aliAccount.length > 4) {
      return `${CWNZNO}${aliAccount.substr(aliAccount.length - 5, 4)}`;
    }
    if (aliAccount) {
      return `${CWNZNO}${aliAccount.substr(0, aliAccount.length)}`;
    }
    return "";
  }, [aliAccount]);

  const ListFooterComponent = () => (
    <>
      <Divider style={styles.separatorStyle} />
      <BankCard
        disabled
        info={{
          bankName: ALI_PAY,
          cardNo: aliAccountNo,
          avatar:
            "https://idingdong.oss-cn-hangzhou.aliyuncs.com/image/2020-05-21-19-10-04YaHrcXTX.png",
        }}
      />
    </>
  );

  const NextButton = () => (
    <Layout style={{ height: 100, backgroundColor: "transparent" }} />
  );
  const renderRightActions = () => (
    <TopNavigationAction
      icon={PlusIcon}
      onPress={() => {
        navigation.navigate("AddBank", {
          pageName,
        });
      }}
    />
  );

  const emptyEvent = isEmpty => {
    const { name } = route;
    if (name === "ChooseBank" && isEmpty) {
      navigation.replace("AddBank", {
        pageName: "Recharge",
      });
    } else {
      changeShow(true);
    }
  };

  return (
    <>
      {showList && (
        <NavHeaderBar
          title={pageName === "Bank" ? userTitle62 : bankMainTitle}
          accessoryRight={renderRightActions}
        />
      )}
      <ListComponent
        getInfo={getList}
        renderItem={renderItem}
        style={styles.list}
        separatorStyle={styles.separatorStyle}
        ListFooterComponent={
          pageName === "Bank" ? ListFooterComponent : NextButton
        }
        showEmpty={pageName === "ChooseBank"}
        emptyEvent={emptyEvent}
        showList={showList}
        extraData={{ selectId }}
      />
      {pageName === "ChooseBank" && showList && (
        <Layout style={styles.subBtn}>
          <Button
            disabled={!selectId}
            onPress={() => {
              navigation.navigate("Recharge", {
                selectId,
              });
            }}
          >
            {next}
          </Button>
        </Layout>
      )}
    </>
  );
}