import React, { Fragment, useState, useEffect, useLayoutEffect, useContext } from 'react';
import { ActivityIndicator } from 'react-native';
import session from '~/Utils/session';
import fetchGet, { fetchPost, fetchDelete } from '~/Utils/fetch';
import { 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 InfoScreen from './Info';
import HistoryScreen from './History';
import { Tab, TabItem, TabTitleGroup, TabHeader, TabContent, TabTitle } from '~/Components/UIControls/Tab';
import { useAuth } from '~/Components/Hooks';

const Screen = ({navigation}) => {
    const siteId = navigation.getParam('siteId', '');
    const drawingId = navigation.getParam('drawingId', '');
    const tab = navigation.getParam('tab', 'info');
    const { auth, userinfo } = useAuth(navigation);

    return ( 
        <BottomTabBarLayout>
            <Tab>
                <TabHeader>
                    <TabTitleGroup top={true}>
                        <TabTitle onPress={() => {
                            navigation.setParams({ tab: 'info' });
                        }} active={tab=='info'?true:false} title="도면정보" />
                        <TabTitle onPress={() => {
                            if(drawingId) {
                                navigation.setParams({ tab: 'history' });
                            }
                        }} active={tab=='history'?true:false} title="도면이력" />
                    </TabTitleGroup>
                </TabHeader>
                <TabContent>
                    <TabItem active={tab=='info'?true:false} lazy={true}>
                        <InfoScreen navigation={navigation} siteId={siteId} drawingId={drawingId} />
                    </TabItem>
                    <TabItem active={tab=='history'?true:false} lazy={true}>
                        <HistoryScreen navigation={navigation} siteId={siteId} drawingId={drawingId} />
                    </TabItem>
                </TabContent>
            </Tab>
        </BottomTabBarLayout>
    );
};

const InfoHeader = ({navigation}) => {
    const action = navigation.getParam('action', Form.VIEW);    // create, edit, view
    const editable = navigation.getParam('editable', action == Form.VIEW ? false : true);
    const { auth, userinfo } = useAuth(navigation);

    return (
        <Header 
            navigation={navigation} 
            title={`도면정보`}
            main={false}
            buttons={
                <Fragment>
                {!editable && (
                    <Fragment>
                        {auth.Update && (<Form.EditButton id="drawing-info" navigation={navigation} type="primary" />)}
                        {auth.Delete && (<Form.DeleteButton id="drawing-info" />)}
                    </Fragment>
                )}
                {editable && (
                    <Fragment>
                        {auth.Update && (<Form.SaveButton id="drawing-info" type="primary" />)}
                        {action != Form.CREATE && auth.Update && <Form.CancelEditButton id="drawing-info" navigation={navigation} />}
                    </Fragment>
                )}
                </Fragment>
            }
        /> 
    )
}

const HistoryHeader = ({navigation}) => {
    return (
        <Header 
            navigation={navigation} 
            title={`도면이력`}
            main={false}
        /> 
    )
}

Screen.navigationOptions = ({navigation}) => { 
    const tab = navigation.getParam('tab', 'info');

    return { 
        header: () => (
            tab == 'info' ? (
                <InfoHeader navigation={navigation} />
            ) : (
                <HistoryHeader navigation={navigation} />
            )
        )
    } 
};

export default Screen;