import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import {
    Layout,
    TopNavigationAction,
    Icon,
} from "@ui-kitten/components";
import NavHeaderBar from "../components/NavHeaderBar";

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


const styles = StyleSheet.create({
    list: {
        flex: 1,
        backgroundColor: "#EEEEEE",
        paddingVertical: 7,
    },
    separatorStyle: {
        height: 6,
    },
});


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



export default function BankScreen({ navigation }) {
    const { userTitle62 } = useModel("wordsModel");

    function getList() {
        return Promise.resolve();
    }

    const renderItem = ({  index }) => <Layout key={index} />;

    const renderRightActions = () => (
      <TopNavigationAction
        icon={PlusIcon}
        onPress={() => {
                navigation.navigat("AddBank");
            }}
      />
    );

    return (
      <>
        <NavHeaderBar
          title={userTitle62}
          accessoryRight={renderRightActions}
        />
        <ListComponent
          getInfo={getList}
          renderItem={renderItem}
          style={styles.list}
          separatorStyle={styles.separatorStyle}
        />
      </>
    );
}