import React, { Fragment, useState, useEffect, useCallback, createRef, useRef } from 'react';
import { View, Text, Alert, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import Styled from 'styled-components/native';
import Header from '~/Components/Layouts/Header';
import { Search, SearchIcon, Line, TextInput, checkFilter, filterValue, ListStyle, DetailIcon, RightArrow, CreateButton, SearchTitle } from '~/Components/Listing/Search';
import Checkbox from '~/Components/UIControls/Checkbox';
import Theme from '~/Themes';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import session from '~/Utils/session';
import SearchList, { SearchListContainer } from '~/Components/Listing/SearchList';
import EmptyView from '~/Components/Listing/EmptyView';
import EntitySelect from '~/Components/EntitySelect';
import { useToast } from '~/Components/UIControls/Message';
import { DateTimePicker } from '~/Components/UIControls/DateTimePicker';
import Input from '~/Components/UIControls/Input';
import Form from '~/Components/Form';
import { Util } from '~/Utils/utils';
import { WorkInfo } from '../Common/WorkInfo';
import { useAuth } from '~/Components/Hooks';

// 설비별 작업이력 조회
// list item
const Item = ({item, index, onPress=()=>{}}) => {
    const zebra = index % 2 == 0 ? true : false;

    return (
        <TouchableOpacity onPress={onPress} style={{...ListStyle.itemContainer, backgroundColor: (zebra?'#fdfdfd':'#fff')}}>
            <View style={{...ListStyle.vertical, flex:1}}>
                <View style={{...ListStyle.horizon, marginBottom:8}}>
                    <Text style={{...ListStyle.fillRounded, backgroundColor:Theme.WorkTypeColor[Util.get(item, "WorkTypeName", "")]}}>
                        {Util.get(item, "WorkTypeName")}
                    </Text>
                </View>
                <Text style={{...ListStyle.textGray}}>
                    {Util.get(item, "FirstClassName") && (
                        <Text>{Util.get(item, "FirstClassName")}&nbsp;&nbsp;</Text>
                    )}
                    {Util.get(item, "SecondClassName") && (
                        <Fragment>
                            <RightArrow /><Text>&nbsp;&nbsp;{Util.get(item, "SecondClassName")}&nbsp;&nbsp;</Text>
                        </Fragment>
                    )}
                    {Util.get(item, "ThirdClassName") && (
                        <Fragment>
                            <RightArrow /><Text>&nbsp;&nbsp;{Util.get(item, "ThirdClassName")}</Text>
                        </Fragment>
                    )}
                </Text>
                <Text style={{...ListStyle.textMedium, marginBottom:10}}>
                    {Util.get(item, "Name")}
                </Text>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textLightGrayLarge}}>시작일</Text>
                    <Text style={{...ListStyle.textLightGrayLarge}}>{Util.getDateString(item, "StartDate")}</Text>
                </View>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textLightGrayLarge}}>종료일</Text>
                    <Text style={{...ListStyle.textLightGrayLarge}}>{Util.getDateString(item, "EndDate")}</Text>
                </View>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textLightGrayLarge}}>업무명</Text>
                    <Text style={{...ListStyle.textLightGrayLarge}}>{Util.get(item, "Title")}</Text>
                </View>
            </View>
        </TouchableOpacity>
    )
}

// list and search
const Screen = (props) => {
    const navigation = props.navigation;
    const [filters, setFilters] = useState({});
    const [list, setList] = useState(null);
    const [page, setPage] = useState(1);
    const [refreshing, setRefreshing] = useState(false);
    const { auth, userinfo } = useAuth(navigation);
    const pages = useRef(10);
    const { showMessage } = useToast();

    const [searchForm, setSearchForm] = useState({
        FirstClassId: '',
        SecondClassId: '',
        ThirdClassId: '',
    });

    // load session when mount...
    useEffect(() => {
    }, []);

    // search events...
    const start = () => {
        setRefreshing(true);
    }
    const success = (data, append) => {
        pages.current = data.pages;
        //console.log(data);

        if(append && page > 1) {
            setList(list.concat(data.list));
        } else {
            setList(data.list);
        }
        setRefreshing(false);
    }
    const fail = (e) => {
        showMessage(e.message);
        setRefreshing(false);
    }

    const refreshList = () => {
        setPage('refresh-' + Math.random());
    }

    return (
        <BottomTabBarLayout>
            <SearchListContainer>
                <SearchList page={page} pages={pages.current} setPage={setPage} refreshing={refreshing}
                    data={list} renderItem={({ item, index }) => {
                        return (
                            <Item item={item} index={index} onPress={() => {
                                navigation.navigate('Form', {
                                    refreshList: refreshList,
                                    action: Form.VIEW, 
                                    siteId: userinfo.SiteId, 
                                    workRequestId: item.WorkRequestId, 
                                    facilityCode: item.FacilityCode,
                                    auth: auth,
                                    userinfo: userinfo,
                                });
                            }} />
                        )
                    }}
                    ListEmptyComponent={<EmptyView list={list} />}
                />
            </SearchListContainer>

            <Search id="history-manage" api={`api/app/FacilityWorkHistory?siteId=${userinfo.SiteId}&businessAuth=${auth.Business}`} 
                    page={page} setPage={setPage} setPage={setPage} limit={50} filters={filters} sort={{field:'FmsWorkOrder.FmsWorkResult.EndDate', order:'desc'}}
                    onStart={start} onSuccess={success} onFailure={fail} >
                <Fragment>

                    <SearchTitle title="작업구분" />
                    <EntitySelect style={{ marginBottom:20 }} entity="FmsWorkCodeType" id="WorkTypeId" name="Name" excludes={[3,4]}
                        defaultLabel="작업구분" emptyLabel="전체" onChange={(item) => { 
                            filterValue([filters, setFilters], 'FmsWorkOrder.FmsWorkRequest.WorkTypeId', item.value, 'eq');
                        }} />

                    <SearchTitle title="시설분류" />
                    <EntitySelect style={{ marginBottom:5 }} entity="FmsFacilityCodeClass" defaultLabel="분류1" emptyLabel="전체" 
                        id="FacilityClassId" name="Name" where={`ParentFacilityClassId IS NULL`} useCheck={true}
                        onChange={(item) => { 
                            setSearchForm({...searchForm,
                                FirstClassId: item.value,
                                SecondClassId: '',
                                ThirdClassId: '',
                            });
                            filterValue([filters, setFilters], 'CmFacility.FirstClassId', item.value, 'eq');
                        }} />
                    <EntitySelect style={{ marginBottom:5 }} entity="FmsFacilityCodeClass" defaultLabel="분류2" emptyLabel="전체" 
                        id="FacilityClassId" name="Name" where={`ParentFacilityClassId = '${searchForm.FirstClassId}'`} useCheck={true}
                        onChange={(item) => { 
                            setSearchForm({...searchForm,
                                SecondClassId: item.value,
                                ThirdClassId: '',
                            });
                            filterValue([filters, setFilters], 'CmFacility.SecondClassId', item.value, 'eq');
                        }} />
                    <EntitySelect style={{ marginBottom:20 }} entity="FmsFacilityCodeClass" defaultLabel="분류3" emptyLabel="전체" 
                        id="FacilityClassId" name="Name" where={`ParentFacilityClassId = '${searchForm.SecondClassId}'`} useCheck={true}
                        onChange={(item) => { 
                            setSearchForm({...searchForm,
                                ThirdClassId: item.value,
                            });
                            filterValue([filters, setFilters], 'CmFacility.ThirdClassId', item.value, 'eq');
                        }} />

                    <SearchTitle title="시설명칭" />
                    <Input style={{ marginBottom:20 }} placeholder="시설명칭" small onChangeText={value => filterValue([filters, setFilters], 'CmFacility.Name', value, 'cn')} />

                    <SearchTitle title="업무명" />
                    <Input style={{ marginBottom:20 }} placeholder="업무명" small onChangeText={value => filterValue([filters, setFilters], 'FmsWorkOrder.Title', value, 'cn')} />

                    <SearchTitle title="시작일" />
                    <DateTimePicker style={{ marginBottom:5 }} placeholder="시작일" useClear={true} onChange={(newDate) => {
                        filterValue([filters, setFilters], 'FmsWorkOrder.FmsWorkResult.StartDate', Util.toDateString(newDate), 'ge');
                    }} />
                    <DateTimePicker style={{ marginBottom:20 }} placeholder="종료일" useClear={true} onChange={(newDate) => {
                        filterValue([filters, setFilters], 'FmsWorkOrder.FmsWorkResult.StartDate', Util.toDateString(newDate), 'le');
                    }} />

                    <SearchTitle title="종료일" />
                    <DateTimePicker style={{ marginBottom:5 }} placeholder="시작일" useClear={true} onChange={(newDate) => {
                        filterValue([filters, setFilters], 'FmsWorkOrder.FmsWorkResult.EndDate', Util.toDateString(newDate), 'ge');
                    }} />
                    <DateTimePicker style={{ marginBottom:20 }} placeholder="종료일" useClear={true} onChange={(newDate) => {
                        filterValue([filters, setFilters], 'FmsWorkOrder.FmsWorkResult.EndDate', Util.toDateString(newDate), 'le');
                    }} />

                </Fragment>
            </Search>
        </BottomTabBarLayout> 
    );
};

// header
Screen.navigationOptions = ({navigation}) => { 
    return { 
        header: () => <Header 
            navigation={navigation} 
            title="설비별 작업이력 조회" 
            buttons={<SearchIcon id="history-manage" />}
        /> 
    } 
};

export default Screen;