import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    StyleSheet,
} from "react-native";
import { useModel } from "flooks";
import {
    useTheme,
} from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import ListComponent from '../../components/ListComponent';
import NavHeaderBar from "../../components/NavHeaderBar";
import Email from "../../components/Email";


const styles = StyleSheet.create({
    top: {
        alignItems: "center",
        paddingVertical: 10,
        marginBottom: 10,
    },
    list: {
        flex: 1,
        backgroundColor: "#fff",
        paddingHorizontal: 15,
        // paddingTop: 20,
        marginTop: 20,
    },
    separatorStyle: {
        marginHorizontal: 13,
    },
});


export default function SystemEmailScreen({ navigation }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");

    const { RCSJTH } = useModel("wordsModel");
    const { getMyList } = useModel("emailModel");

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

    const emailItem = ({ item, index }) => (
      <Email
        key={index}
        info={item}
        pressEvent={() => {
                navigation.navigate("EmailDetail", {
                    id: index,
                });
            }}
      />
    );

    return (
      <>
        <NavHeaderBar title={RCSJTH} />
        <ListComponent
          getInfo={getMyList}
          renderItem={emailItem}
          style={styles.list}
          separatorStyle={styles.separatorStyle}
          showEmpty
        />
      </>
    );
}