import React, { Fragment, useState, useEffect, useLayoutEffect, useContext } from 'react';
import session from '~/Utils/session';
import fetchGet, { fetchPost, fetchDelete } from '~/Utils/fetch';
import { useToast, confirm } 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 LegalCheckForm from './LegalCheckForm';
import LegalEduForm from './LegalEduForm';
import { useAuth } from '~/Components/Hooks';

const Screen = ({navigation}) => {
    const action = navigation.getParam('action', Form.VIEW);
    const editable = navigation.getParam('editable', action == Form.VIEW ? false : true);
    const siteId = navigation.getParam('siteId', '');
    const workScheduleId = navigation.getParam('workScheduleId', 0);
    const workTypeId = navigation.getParam('workTypeId', 0);
    const tab = navigation.getParam('tab', (workTypeId == 0 || workTypeId == 2 ? 'legal-check-form' : 'legal-edu-form'));

    const [facilities, setFacilities] = useState([]);

    return ( 
        <BottomTabBarLayout>
            <Tab>
                <TabHeader>
                    <TabTitleGroup top={true}>
                        <TabTitle onPress={() => {
                            if(workTypeId == 0 || workTypeId == 2) {
                                navigation.setParams({ tab: 'legal-check-form' });
                            }
                        }} active={tab=='legal-check-form'?true:false} title="법정검사" />
                        <TabTitle onPress={() => {
                            if(workTypeId == 0 || workTypeId == 7) {
                                navigation.setParams({ tab: 'legal-edu-form' });
                            }
                        }} active={tab=='legal-edu-form'?true:false} title="법정교육" />
                        <TabTitle onPress={() => {
                            if(workTypeId == 0 || workTypeId == 2) {
                                navigation.setParams({ tab: 'facilities' });
                            }
                        }} active={tab=='facilities'?true:false} title="시설목록" />
                    </TabTitleGroup>
                </TabHeader>
                <TabContent>
                    <TabItem active={tab=='legal-check-form'?true:false} lazy={true} alwaysReload={false}>
                        <LegalCheckForm navigation={navigation} facilities={facilities} setFacilities={setFacilities} />
                    </TabItem>
                    <TabItem active={tab=='legal-edu-form'?true:false} lazy={true} alwaysReload={false}>
                        <LegalEduForm navigation={navigation} facilities={facilities} setFacilities={setFacilities} />
                    </TabItem>
                    <TabItem active={tab=='facilities'?true:false}>
                        <Facilities navigation={navigation} keys={{SiteId:siteId, WorkScheduleId:workScheduleId}}
                            facilities={facilities} setFacilities={setFacilities} editable={editable} />
                    </TabItem>
                </TabContent>
            </Tab>
        </BottomTabBarLayout>
    );
};

Screen.navigationOptions = ({navigation}) => { 
    const action = navigation.getParam('action', Form.VIEW);    // create, edit, view
    const editable = navigation.getParam('editable', action == Form.VIEW ? false : true);
    const workTypeId = navigation.getParam('workTypeId', 0);
    const tab = navigation.getParam('tab', (workTypeId == 0 || workTypeId == 2 ? 'legal-check-form' : 'legal-edu-form'));
    const { auth, config } = useAuth(navigation);

    return { 
        header: () => (
            <Header 
                navigation={navigation} 
                title={`법정검사/교육`}
                main={false}
                buttons={
                    (() => {
                        if(tab == 'legal-check-form') {
                            return (
                                <Fragment>
                                {!editable && (
                                    <Fragment>
                                        {auth.Update && <Form.EditButton id="legal-check-form" navigation={navigation} type="primary" />}
                                    </Fragment>
                                )}
                                {editable && (
                                    <Fragment>
                                        {auth.Update && <Form.SaveButton id="legal-check-form" type="primary" />}
                                        {action != Form.CREATE && auth.Update && <Form.CancelEditButton id="legal-check-form" navigation={navigation} />}
                                    </Fragment>
                                )}
                                </Fragment>
                            );
                        } else if(tab == 'legal-edu-form') {
                            return (
                                <Fragment>
                                {!editable && (
                                    <Fragment>
                                        {auth.Update && <Form.EditButton id="legal-edu-form" navigation={navigation} type="primary" />}
                                    </Fragment>
                                )}
                                {editable && (
                                    <Fragment>
                                        {auth.Update && <Form.SaveButton id="legal-edu-form" type="primary" />}
                                        {action != Form.CREATE && auth.Update && <Form.CancelEditButton id="legal-edu-form" navigation={navigation} />}
                                    </Fragment>
                                )}
                                </Fragment>
                            );
                        } else {
                            return (<Fragment />);
                        }
                    })()
                }
            /> 
        )
    } 
};

export default Screen;