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

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

const BackIcon = props => <Icon {...props} fill='#fff' name='arrow-back' />;


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,
    },
    selectMain: {
        backgroundColor: "transparent",
    },
    select: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        backgroundColor: "transparent",
        flexShrink: 0,
        minWidth: 150,
    },
    list: {
        backgroundColor: "#fff",
        flex: 1,
    },
    separatorStyle: {
        marginHorizontal: 13,
    },
});


export default function MoneyListScreen({ navigation }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    const { getUserInfo } = useModel("appUserModel");
    const { selectTiltle1, selectTiltle2, selectTiltle3 } = useModel(
        "wordsModel"
    );
    const { moneyRecordList } = useModel("moenyRecordModel", true);
    const [selectedIndex, setSelectedIndex] = React.useState(new IndexPath(0));
    const data = [
        {
            title: selectTiltle1,
            type: "",
        },
        {
            title: selectTiltle2,
            type: "INCOME",
        },
        {
            title: selectTiltle3,
            type: "WITHDRAW",
        },
    ];
    const displayValue = data[selectedIndex.row].title;

    const [child, setChild] = React.useState();
    const [startState, changeStart] = React.useState(true);

 
    const renderOption = (item, index) => (
      <SelectItem key={index} title={item.title} />
    );
    const selectElement = TextProps => (
      <Layout style={[styles.select, TextProps.style]}>
        <Select
          value={displayValue}
          selectedIndex={selectedIndex}
          onSelect={index => {
                    setSelectedIndex(index);
                    changeStart(true);
                }}
          appearance='bar'
          state='primary'
        >
          {data.map(renderOption)}
        </Select>
      </Layout>
    );

    // const {} = useModel("wordsModel");

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

    // 获取列表
    function getList(page, size) {
        const type = data[selectedIndex.row].type || "";
        return moneyRecordList(page, size, { type }).then(res => {
            changeStart(false);
			return Promise.resolve(res);
        });
    }
    const renderBackAction = () => (
      <TopNavigationAction
        icon={BackIcon}
        onPress={() => navigation.goBack()}
      />
    );

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

    return (
      <>
        <TopNavigation
          alignment='center'
          title={selectElement}
          accessoryLeft={renderBackAction}
        />
        <ListComponent
          setChild={setChild}
          getInfo={getList}
          renderItem={walletItem}
          style={styles.list}
          separatorStyle={styles.separatorStyle}
          showEmpty
          extraData={{ child }}
          startState={startState}
        />
      </>
    );
}