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 { 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 InfoScreen from './Info';
import { useAuth } from '~/Components/Hooks';
import HistoryScreen from './History';
import { Tab, TabItem, TabTitleGroup, TabHeader, TabContent, TabTitle } from '~/Components/UIControls/Tab';

const Screen = ({navigation}) => {
    const action = navigation.getParam('action', Form.VIEW);    // create, edit, view
    const siteId = navigation.getParam('siteId', '');
    const manualId = navigation.getParam('manualId', '');
    const tab = navigation.getParam('tab', 'info');
    const { auth } = useAuth(navigation);
    console.log(action);
    return ( 
        
        <BottomTabBarLayout>
            {action == Form.CREATE &&  (
                <Tab>
                    <TabContent>
                    <TabItem active={tab=='info'?true:false} lazy={true}>
                        <InfoScreen navigation={navigation} siteId={siteId} manualId={manualId} />
                    </TabItem>
                    </TabContent>
                </Tab>
            )}
            {action != Form.CREATE &&  (
            <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} lazy={true}>
                        <InfoScreen navigation={navigation} siteId={siteId} manualId={manualId} />
                    </TabItem>
                    <TabItem active={tab=='history'?true:false} lazy={true}>
                        <HistoryScreen navigation={navigation} siteId={siteId} manualId={manualId} />
                    </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 } = useAuth(navigation);
    console.log(action);
    return (
        <Header 
            navigation={navigation} 
            title={`매뉴얼`}
            main={false}
            buttons={
                <Fragment>
                {!editable && (
                    <Fragment>
                        {auth.Update && <Form.EditButton id="manual-info" navigation={navigation} type="primary" />}
                        {auth.Delete && <Form.DeleteButton id="manual-info" />}
                    </Fragment>
                )}
                {editable && (
                    <Fragment>
                        {auth.Update && <Form.SaveButton id="manual-info" type="primary" />}
                        {action != Form.CREATE && <Form.CancelEditButton id="manual-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;