import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    StyleSheet,
} from "react-native";
import { useModel } from "flooks";
import {
    Layout,
    Text,
    useTheme,
    Button,
    Select,
    SelectItem,
    IndexPath,
} from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import NavHeaderBar from "../components/NavHeaderBar";
import MoneyRecord from "../components/MoneyRecord";

import ListComponent from "../components/ListComponent";

// 余额
const data = ["2020-03", "2020-04", "2020-05"];


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingBottom: 33,
        paddingVertical: 40,
        alignItems: "center",
    },
    icon: {
        width: 90,
        height: 80,
        marginBottom: 26,
    },
    text: {
        fontWeight: "500",
        marginBottom: 7,
    },
    button: {
        marginTop: 19,
    },
    lay: {
        flexDirection: "row",
        paddingHorizontal: 17,
        paddingBottom: 20,
    },
    flex1: {
        flex: 1,
        flexShrink: 0,
    },
    money: {
        textAlign: "center",
        fontWeight: "normal",
    },
    tiltle: {
        fontSize: 12,
        color: "#A43506",
        alignSelf: "center",
        flexShrink: 0,
    },
    select: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        backgroundColor: "#EEEEEE",
    },
    list: {
        backgroundColor: "#fff",
        flex: 1,
    },
    separatorStyle: {
        marginHorizontal: 13,
    },
});


export default function MoneyListScreen({ navigation }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { getUserInfo, money } = useModel("appUserModel");
    const {  httpGet } = useModel("httpModel", true);
    const [selectedIndex, setSelectedIndex] = React.useState(
        new IndexPath(data.length - 1)
    );

    const { userTitle6, OZXEWT, ZJDSDE } = useModel("wordsModel");

    const displayValue = data[selectedIndex.row];

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

    // 获取列表
    function getList(page, size) {
        return httpGet(
            "/moneyRecord/my",
            {
                page,
                size,
            },
            true
        );
    }

    const renderOption = (title, index) => (
      <SelectItem key={index} title={title} />
    );
    const selectElement = () => (
      <Layout style={[styles.select]}>
        <Select
          value={displayValue}
          selectedIndex={selectedIndex}
          onSelect={index => setSelectedIndex(index)}
        >
          {data.map(renderOption)}
        </Select>
      </Layout>
    );

    const walletItem = ({ item, index }) => (
      <MoneyRecord key={index} info={item} />
    );

    return (
      <>
        <NavHeaderBar title={userTitle6} />
        <Layout
          style={[
            styles.lay,
            {
              backgroundColor: theme["color-primary-500"],
              borderColor: theme["color-primary-500"],
            },
          ]}
        >
          <Text category="c1" style={[styles.flex1, styles.tiltle]}>
            {ZJDSDE}
          </Text>
          <Text
            category="h2"
            style={[styles.flex1, styles.money]}
            status="control"
          >
            {money || 0}
          </Text>
          <Button
            appearance="ghost"
            style={[styles.flex1]}
            size="large"
            status="control"
            onPress={() => {
              navigation.navigate("ChooseBank");
            }}
          >
            {OZXEWT}
          </Button>
        </Layout>
        <ListComponent
          getInfo={getList}
          renderItem={walletItem}
          ListHeaderComponent={selectElement}
          style={styles.list}
          separatorStyle={styles.separatorStyle}
          showEmpty
        />
      </>
    );
}