import React, { Fragment, useState, useEffect, useLayoutEffect, useContext } from 'react';
import session from '~/Utils/session';
import fetchGet, { fetchPost, fetchDelete } from '~/Utils/fetch';
import { useToast, confirm, usePrompt } from '~/Components/UIControls/Message';
import Form from '~/Components/Form';
import { useForm } from 'react-hook-form';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import { Tab, TabItem, TabTitleGroup, TabHeader, TabContent, TabTitle } from '~/Components/UIControls/Tab';
import Facilities from '~/Screens/Root/Facility/Common/Facilities';
import Accidents from '../Common/Accidents';
import { Util } from '~/Utils/utils';
import { usePopup } from '~/Components/UIControls/Popup';
import WorkHistory from '../Common/WorkHistory';
import Materials from '../Common/Materials';
import Header from '~/Components/Layouts/Header';
import { View } from 'react-native';
import { useAuth } from '~/Components/Hooks';

// 설비별 작업이력 상세
const Screen = ({navigation}) => {
    const refreshList = navigation.getParam('refreshList', ()=>{});
    const siteId = navigation.getParam('siteId', '');
    const workRequestId = navigation.getParam('workRequestId', 0);
    const facilityCode = navigation.getParam('facilityCode', 0);
    const tab = navigation.getParam('tab', 'info');
    const { auth, userinfo } = useAuth(navigation);
    const { showMessage } = useToast();

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

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

    // unmount
    useEffect(() => () => {
    }, []);
    
    // react hook form initialize
    const { register, setValue, handleSubmit, errors, getValues } = useForm();
    useLayoutEffect(() => {
        Form.setUseFormFunctions(register, setValue);
    }, [register]);

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

        try {
            const result = await fetchGet(`api/app/FacilityWorkHistory/Get?siteId=${siteId}&workRequestId=${workRequestId}&facilityCode=${facilityCode}`);
            setData(result);
        } catch(error) {
            showMessage(error.message);
        }

        setLoading(false);
    }

    return ( 
        <BottomTabBarLayout>
            <Fragment>
                <Tab>
                    <TabHeader>
                        <TabTitleGroup top={true}>
                            <TabTitle onPress={() => {
                                navigation.setParams({ tab: 'info' });
                            }} active={tab=='info'?true:false} title="상세정보" />
                            <TabTitle onPress={() => {
                                navigation.setParams({ tab: 'history' });
                            }} active={tab=='history'?true:false} title="작업이력" />
                        </TabTitleGroup>
                    </TabHeader>
                    <TabContent>
                        <TabItem active={tab=='info'?true:false}>
                            <Form.Container id="facility-work-history-form">
                                <Form.Field>
                                    <Form.Title><Form.Label>설비명칭</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.get(data, "Name")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>업무분야</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.get(data, "BusinessFieldName")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>작업자</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.get(data, "WorkerUserName")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>작업구분</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.get(data, "WorkTypeName")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>작업상태</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.get(data, "WorkProgressName")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>작업예정일</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.getDateString(data, "StartWorkDate")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>작업시작일</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.getDateString(data, "StartDate")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.Title><Form.Label>작업종료일</Form.Label></Form.Title>
                                    <Form.Input defaultValue={Util.getDateString(data, "EndDate")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.TitleTop><Form.Label>지시제목</Form.Label></Form.TitleTop>
                                    <Form.Input defaultValue={Util.get(data, "Title")} editable={false} />
                                </Form.Field>

                                <Form.Field>
                                    <Form.TitleTop><Form.Label>지시내용</Form.Label></Form.TitleTop>
                                    <Form.Input defaultValue={Util.get(data, "Content")} multiline={true} editable={false} />
                                </Form.Field>

                                <Form.Field style={{ height:30 }}>
                                </Form.Field>
                            </Form.Container>
                        </TabItem>
                        <TabItem active={tab=='history'?true:false} lazy={true}>
                            <WorkHistory siteId={siteId} workRequestId={workRequestId} 
                                editable={false} creatable={false} auth={auth} />
                        </TabItem>
                    </TabContent>
                </Tab>
                {loading && <Form.Loading />}
            </Fragment>
        </BottomTabBarLayout>
    );
};

Screen.navigationOptions = ({navigation}) => { 
    return { 
        header: () => (
            <Header 
                navigation={navigation} 
                title={`설비별 작업이력 조회`}
                main={false}
                buttons={
                    <Fragment>
                    </Fragment>
                }
            /> 
        )
    } 
};

export default Screen;