import React, { Fragment, useState, useEffect, useLayoutEffect, useContext } from 'react';
import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
import session from '~/Utils/session';
import fetchGet, { fetchPost, fetchPut, fetchDelete } from '~/Utils/fetch';
import { useToast, confirm } from '~/Components/UIControls/Message';
import Form from '~/Components/Form';
import Button from '~/Components/UIControls/Button';
import { useForm } from 'react-hook-form';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import { UploadFileType } from '~/Components/UIControls/UploadFile';
import { usePopup } from '~/Components/UIControls/Popup';
import { useAuth } from '~/Components/Hooks';
import { ScrollView } from 'react-native-gesture-handler';
import { ListStyle, DetailIcon } from '~/Components/Listing/Search';
import EmptyView from '~/Components/Listing/EmptyView';
import { Util } from '~/Utils/utils';

const Screen = ({ navigation }) => {
    const action = navigation.getParam('action', Form.VIEW);
    const editable = navigation.getParam('editable', action == Form.VIEW ? false : true);
    const setEditable = (value) => {
        navigation.setParams({ editable: value });
    };
    const refreshList = navigation.getParam('refreshList', () => {});
    const siteId = navigation.getParam('siteId', '');
    const date = navigation.getParam('date', null);
    const id = navigation.getParam('id', null);
    const { auth, userinfo } = useAuth(navigation);

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState();
    const { showMessage } = useToast();

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

    // popup
    const { openPopup } = usePopup();

    const fetch = async () => {
        setLoading(true);
        await session.load();

        try {
            const api =
                id == 1
                    ? `/api/WorkRequest/CustomListSite?siteId=${siteId}&dates=${date}`
                    : `/api/WorkResult/CustomListSite?siteId=${siteId}&dates=${date}`;
            const result = await fetchGet(api);
            setData(result);
        } catch (error) {
            showMessage(error.message);
        }

        setLoading(false);
    };

    //console.log('data', data);

    return (
        <BottomTabBarLayout>
            <ScrollView>
                <View style={{ backgroundColor: '#eee', alignItems: 'center', padding: 10 }}>
                    <Text style={{ fontSize: 15 }}>업무명</Text>
                </View>
                {loading && (
                    <ActivityIndicator size="small" />
                )}
                {data &&
                    data.list &&
                    data.list.map((item) => (
                        <TouchableOpacity
                            onPress={() => {
                                if (id == 1) {
                                    if(item.WorkProgressId == 6) {
                                        navigation.navigate('WorkHistoryForm', {
                                            action: Form.VIEW,
                                            refreshList: refreshList,
                                            auth: auth,
                                            siteId: session.getSiteId(),
                                            workRequestId: item.WorkRequestId,
                                            readonly: true,
                                        });
                                    } else {
                                        navigation.navigate('EditWorkRequest', {
                                            action: Form.VIEW,
                                            refreshList: refreshList,
                                            auth: auth,
                                            siteId: session.getSiteId(),
                                            workRequestId: item.WorkRequestId,
                                            readonly: true,
                                        });
                                    }
                                } else {
                                    navigation.navigate('WorkHistoryForm', {
                                        action: Form.VIEW,
                                        refreshList: refreshList,
                                        auth: auth,
                                        siteId: session.getSiteId(),
                                        workRequestId: item.WorkRequestId,
                                        readonly: true,
                                    });
                                }
                            }}
                            style={{
                                ...ListStyle.itemContainer,
                                borderTopWidth: 0,
                                flex:1
                            }}
                        >
                            <View style={{flex:1}}>
                                <View style={{flexDirection:'row', flex:1, alignItems:'center', justifyContent:'space-between', paddingRight:15}}>
                                    <Text style={{width:Util.getScreenWidth()-140}}>{item.Title}</Text>
                                    {item.WorkProgressId == 6 && (
                                        <View style={{width:45, height:45, borderRadius:25, backgroundColor:'#595959', alignItems:'center', justifyContent:'center'}}>
                                            <Text style={{ includeFontPadding:false, color:'white' }}>
                                                완료
                                            </Text>
                                        </View>
                                    )}
                                </View>
                            </View>
                            <DetailIcon />
                        </TouchableOpacity>
                    ))}
            </ScrollView>
        </BottomTabBarLayout>
    );
};

Screen.navigationOptions = ({ navigation }) => {
    return {
        header: () => <Header navigation={navigation} title={`작업정보`} main={false} />,
    };
};

export default Screen;
