import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import SearchList, { SearchListContainer } from '~/Components/Listing/SearchList';
import EmptyView from '~/Components/Listing/EmptyView';
import { useToast } from '~/Components/UIControls/Message';
import { Util } from '~/Utils/utils';
import { useAuth } from '~/Components/Hooks';
import EmptyLayout from '~/Components/Layouts/EmptyLayout';
import fetchGet from '~/Utils/fetch';
import { ListStyle, DetailIcon } from '~/Components/Listing/Search';
import Checkbox from '~/Components/UIControls/Checkbox';

// list item
const Item = ({item, index, onPress=()=>{}}) => {
    const zebra = index % 2 == 0 ? true : false;
    return (
        <TouchableOpacity onPress={onPress} style={{
            ...ListStyle.itemContainer, 
            borderTopWidth: 0, 
            backgroundColor: (zebra?'#fdfdfd':'#fff'),
        }}>
            <View>
                <Text style={{...ListStyle.text}}>{Util.get(item, "ReportName")}</Text>
            </View>
            <View style={{...ListStyle.horizon, justifyContent:'space-between', marginRight: 15}}>
                <Text style={{...ListStyle.text, flex:1}}>
                    {Util.get(item, "Writer")}
                </Text>
                <Text style={{...ListStyle.text}}>
                    {Util.formatDate(Util.get(item, "DateTime"), 'yyyy-MM-dd')}
                </Text>
            </View>
        </TouchableOpacity>
    )
}

// list and search
const Screen = ({navigation, siteId, facilityCode, propertyId, date}) => {
    const [list, setList] = useState(null);
    const [loading, setLoading] = useState(false);
    const { auth, userinfo } = useAuth(navigation);
    const [period, setPeriod] = useState(0);
    const { showMessage } = useToast();

    useEffect(() => {
        fetch();
    }, [period]);

    const fetch = async () => {
        setLoading(true);

        try {
            let result = await fetchGet(`api/app/ManualMeter/ReportList?siteId=${siteId}&facilityCode=${facilityCode}&date=${date}&period=${period}`);
            setList(result);
        } catch(error) {
            showMessage(error.message);
        }

        setLoading(false);
    }

    return (
        <EmptyLayout>
            <View style={{ width:'100%', height:50, flexDirection:'row', alignItems:'center', justifyContent:'space-evenly' }}>
                <Checkbox label='오늘' hasState={false} value={period==0?true:false} onChange={() => setPeriod(0)} />
                <Checkbox label='일주일' hasState={false} value={period==7?true:false} onChange={() => setPeriod(7)} />
                <Checkbox label='한달' hasState={false} value={period==30?true:false} onChange={() => setPeriod(30)} />
                <Checkbox label='3개월' hasState={false} value={period==90?true:false} onChange={() => setPeriod(90)} />
            </View>
            <SearchListContainer>
                <SearchList refreshing={loading} data={list} renderItem={({ item, index }) => {
                        return (
                            <Item item={item} index={index} onPress={() => {
                                navigation.navigate('Form', {
                                    refreshList: refreshList,
                                    action: Form.VIEW, 
                                    siteId: userinfo.SiteId, 
                                    seq: item.Seq, 
                                    datetime: item.CreateDate,
                                    reportFormatId: item.ReportFormatId,
                                    auth: auth,
                                    userinfo: userinfo,
                                });
                            }} />
                        )
                    }}
                    ListEmptyComponent={<EmptyView list={list} />}
                />
            </SearchListContainer>
        </EmptyLayout> 
    );
};

export default Screen;