import React, { Fragment, useState, useEffect, useLayoutEffect, useContext } from 'react';
import Styled from 'styled-components/native';
import session from '~/Utils/session';
import fetchGet, { fetchPost, fetchDelete } from '~/Utils/fetch';
import { useToast, confirm, usePrompt, showMessage } from '~/Components/UIControls/Message';
import Form from '~/Components/Form';
import { useForm, Controller } 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 { Util } from '~/Utils/utils';
import WorkHistory from '../Common/WorkHistory';
import Materials from '../Common/Materials';
import Header from '~/Components/Layouts/Header';
import { View, Text } from 'react-native';
import { useAuth } from '~/Components/Hooks';
import Accidents from '../Common/Accidents';
import Complaints from '../Common/Complaints';
import Theme from '~/Themes';
import { UploadFileType } from '~/Components/UIControls/UploadFile';
import IconButton from '~/Components/UIControls/IconButton';
import { isTrue } from '~/Components/UIControls/Common';
import { CreateButton } from '~/Components/Listing/Search';

const titleWidth = 100;

const Human = Styled.View`
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 32px;
    border: 0px;
    margin-right:3px;
    margin-top:1px;
    margin-bottom:1px;
    padding-left:8px;
    padding-right:8px;
    background-color: #0b83e6;
    border-radius:5px;
    overflow:hidden;
`;
const HumanName = Styled.Text`
    font-size: 16;
    font-family: ${Theme.Fonts.Regular};
    include-font-padding: false;
    line-height: 24;
    letter-spacing: -1.6;
    color: white;
`;
const HumanRemove = ({onPress=()=>{}}) => {
    return (
        <IconButton iconFamily="AntDesign" iconName="minuscircle" color="white" size={20} onPress={onPress} style={{marginLeft:10}} />
    )
}

const HumanManager = ({editable, initialHumans, setValue, humansDataPath}) => {
    const [ humans, setHumans ] = useState(Array.isArray(initialHumans) ? initialHumans : []);
    
    const { prompt } = usePrompt();

    useEffect(() => {
        if(Array.isArray(initialHumans)) {
            setValue(humansDataPath, initialHumans.join(','));
            setHumans([...initialHumans]);
        } else {
            setValue(humansDataPath, '');
            setHumans([]);
        }
    }, [editable]);

    const addHuman = () => {
        prompt({title:'인원명', message:'추가할 인원의 이름을 입력하세요.', defaultValue:'', confirm:(text) => {
            let newHumans = [...humans];
            newHumans.push(text);
            setValue(humansDataPath, newHumans.join(','), true);
            setHumans(newHumans);
        }});
    }

    const removeHuman = (index) => {
        let newHumans = [];
        for(let i=0; i<humans.length; i++) {
            if(index == i) continue;
            newHumans.push(humans[i]);
        }
        setValue(humansDataPath, newHumans.join(','), true);
        setHumans(newHumans);
    }

    return (
        <Fragment>
            <Form.FieldSet 
                style={{
                    flexDirection:'row', flexWrap:'wrap', alignItems:'flex-start', 
                    borderWidth:1, borderColor:Theme.COLORS.EDITABLE_BORDER, borderRadius:4
                }}
            >
                {humans && Array.isArray(humans) && humans.length > 0 ? humans.map((name, index) => {
                    return (
                        <Fragment key={`human-${index}`}>
                            <Human style={!isTrue(editable) && {backgroundColor:'#9aa3ac'}}>
                                <HumanName>{name}</HumanName>
                                {isTrue(editable) && <HumanRemove onPress={() => { removeHuman(index) }} />}
                            </Human>
                        </Fragment>
                    )
                }) : (
                    <View style={{flex:1, height:35, justifyContent:'center', alignItems:'flex-start'}}>
                        <Form.Label style={{ 
                            fontFamily:Theme.Fonts.Regular, color:Theme.COLORS.EDITABLE_BORDER,
                            letterSpacing:-1.6, fontSize:16, lineHeight:30 
                        }}>작업자를 추가해 주세요.</Form.Label>
                    </View>
                )}
                <CreateButton onPress={() => {
                    addHuman()
                }} style={{
                    right:3, top:3, bottom:'auto',
                    width:38, height:38
                }} />
            </Form.FieldSet>
            <Form.Regist name={humansDataPath} />
        </Fragment>
    )
}

const PromptContent = ({
    nextWork=false, title='', message='', form={}, siteId=0, workRequestId=0, userId='',
    defaultValue={}, initialDate=new Date(), minimumDate=new Date(),
    navigation=null, setLoading=()=>{}, refreshList=()=>{}, setPromptParams=()=>{}
}) => {

    const { register, setValue, handleSubmit, errors, getValues, control } = useForm();
    useLayoutEffect(() => {
    }, [register]);

    const confirmProcess = async (confirmForm) => {
        console.log('confirmForm - ', confirmForm);
        const submit = { 
            FmsWorkRequest: {
                Content: Util.get(form, "FmsWorkRequest.Content"),
                WorkUsers: Util.get(confirmForm, "FmsWorkRequest.WorkUsers"),
                WorkPartnerId: Util.get(confirmForm, "FmsWorkRequest.WorkPartnerId"),
            },
            FmsWorkOrder: {
                Content: Util.get(form, "FmsWorkOrder.Content"),
            },
            SiteId: siteId, 
            WorkRequestId: workRequestId,
            StartDate: confirmForm.StartDate,
            EndDate: confirmForm.EndDate,
            Content: Util.get(form, "Content"),
            ConfirmDesc: Util.get(form, "ConfirmDesc"),
            ConfirmedUserId: userId,
        };
        console.log('submit - ', submit);

        confirm('승인', '승인처리 하시겠습니까?', async () => {
            setLoading(true);
            try {
                const result = await fetchPost(`api/app/WorkResult/Confirm?date=${Util.toDateString(confirmForm.WorkDueDate)}`, submit);
                refreshList();
                navigation.pop();
            } catch(error) {
                showMessage(error.message);
            }
            setLoading(false);
        });
    }

    return (
        <>
            <View style={{position:"absolute",left:0,top:0,right:0,bottom:0, backgroundColor:'black', opacity:0.6}} />
            <View style={{position:"absolute",left:0,top:0,right:0,bottom:0, flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
                <View style={{position:"relative", width:'90%', backgroundColor:'white', padding:20, borderRadius:5, overflow:'hidden'}}>
                    <View style={{}}>
                        <Text style={{fontFamily:Theme.Fonts.Regular, fontSize:20, marginBottom:20}}>{title}</Text>
                        <Text style={{fontFamily:Theme.Fonts.Regular, fontSize:14, marginBottom:10}}>{message}</Text>
                    </View>

                    <Controller 
                        name="FmsWorkRequest.WorkUsers" 
                        defaultValue=""
                        control={control} /* rules={{required:'작업자를 추가하세요.'}} */
                        as={
                            <HumanManager 
                                editable={true} 
                                initialHumans={[]} 
                                setValue={setValue} 
                                humansDataPath="FmsWorkRequest.WorkUsers" 
                            />
                        }
                    />
                    <Form.Error message={Util.get(errors, 'FmsWorkRequest.WorkUsers')} />

                    <Form.Field>
                        <Controller 
                            name="FmsWorkRequest.WorkPartnerId" 
                            defaultValue={defaultValue.workPartnerId}
                            control={control}
                            as={
                                <Form.PopupSelect path="/Popup/Partner/Index" popupProps={{navigation, siteId}} 
                                    emptyLabel="업체" editable={true} defaultLabel={defaultValue.workPartnerName}
                                    onSelect={(result) => {
                                        setValue('FmsWorkRequest.WorkPartnerId', result.PartnerId, true);
                                    }}
                                />
                            } />
                    </Form.Field>
                    <Form.Error message={Util.get(errors, 'FmsWorkRequest.WorkPartnerId')} />

                    <Form.Field>
                        <Controller 
                            name="StartDate" 
                            defaultValue={defaultValue.workStartDateTime} 
                            control={control} /* rules={{required:'작업시작일시를 선택하세요.'}} */
                            as={
                                <Form.DatePicker placeholder="작업시작일시"
                                    mode="datetime" date={defaultValue.workStartDateTime} editable={true}
                                    onChange={(newDate) => setValue('StartDate', newDate, true)} 
                                />
                            } />
                    </Form.Field>
                    <Form.Error message={Util.get(errors, 'StartDate')} />

                    <Form.Field>
                        <Controller 
                            name="EndDate" 
                            defaultValue={defaultValue.workEndDateTime} 
                            control={control} /* rules={{required:'작업종료일시를 선택하세요.'}} */
                            as={
                                <Form.DatePicker placeholder="작업종료일시"
                                    mode="datetime" date={defaultValue.workEndDateTime} editable={true}
                                    onChange={(newDate) => setValue('EndDate', newDate, true)} 
                                />
                            } />
                    </Form.Field>
                    <Form.Error message={Util.get(errors, 'EndDate')} />

                    <Form.Field>
                        <Form.ButtonGroup style={{position:"relative", paddingRight:0}}>
                            <Form.DefaultButton onPress={() => { setPromptParams({show:false}) }}>취소</Form.DefaultButton>
                            <Form.PrimaryButton onPress={handleSubmit(confirmProcess)}>승인</Form.PrimaryButton>
                        </Form.ButtonGroup>
                    </Form.Field>
                </View>
            </View>
        </>
    )
}

// 작업완료 관리 
const Screen = ({navigation}) => {
    const refreshList = navigation.getParam('refreshList', ()=>{});
    const siteId = navigation.getParam('siteId', '');
    const workRequestId = navigation.getParam('workRequestId', 0);
    const tab = navigation.getParam('tab', 'info');
    const { auth, userinfo, config } = useAuth(navigation);

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState({});
    const [facilities, setFacilities] = useState([]);
    const [accidents, setAccidents] = useState([]);
    const [complaints, setComplaints] = useState([]);
    const { prompt } = usePrompt();
    const { showMessage } = useToast();
    const [promptParams, setPromptParams] = useState({
        show: false,
        nextWork: false,
        title: '',
        message: '',
        form: {},
        siteId: 0,
        workRequestId: 0,
        userId: '',
        defaultValue: {},
        initialDate: new Date(),
        minimumDate: new Date(),
    });

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

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

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

        try {
            const result = await fetchGet(`api/app/WorkResult/Get?siteId=${siteId}&workRequestId=${workRequestId}`);
            setData(result);
            setFacilities(result.FmsWorkResultToFacility);
            setAccidents(result.FmsWorkRequestToAccident);
            setComplaints(result.FmsWorkRequestToComplaint);
            navigation.setParams({workProgressId: result.WorkProgressId});
        } catch(error) {
            showMessage(error.message);
        }

        setLoading(false);
    }

    // action receive
    const onAction = async (action) => {
        console.log('onAction - ', action);
        if(action == 'approval') {
            handleSubmit(confirmWork)();
        }
    }

    // 승인 처리
    const confirmWork = async (form) => {
        console.log('confirmWork form - ', form);

        // 차기 계획일자 입력받은후 승인처리
        if(loading) {
            showMessage('처리중입니다. 잠시만기다려주세요.');
            return;
        }

        const submit = {
            SiteId: siteId,
            WorkRequestId: workRequestId,
            Content: Util.get(form, 'Content', ''),
            ConfirmDesc: Util.get(form, 'ConfirmDesc', ''),
            ConfirmedUserId: userinfo.UserId,
            FmsWorkRequest: {
                Content: Util.get(form, 'FmsWorkRequest.Content', ''),
            },
            FmsWorkOrder: {
                Content: Util.get(form, 'FmsWorkOrder.Content', ''),
            }
        };

        confirm('승인', '승인처리 하시겠습니까?', async () => {
            setLoading(true);
            try {
                const result = await fetchPost(`api/app/WorkResult/Confirm`, submit);
                refreshList();
                navigation.pop();
            } catch(error) {
                showMessage(error.message);
            }
            setLoading(false);
        });

        /*
        setPromptParams({
            show: true,
            nextWork: false,
            title: '추가정보 입력',
            message: '작업 추가정보를 입력하세요.',
            form: {...form},
            siteId: siteId,
            workRequestId: workRequestId,
            userId: userinfo.UserId,
            defaultValue: { 
                workUsers: '',
                workPartnerId: data.WorkPartnerId,
                workPartnerName: data.WorkPartnerName,
                workStartDateTime: data.StartDate,
                workEndDateTime: data.EndDate,
            },
            initialDate: null,
            minimumDate: null,
        });
        */
    }

    const updateAccidents = async (list) => {
        setLoading(true);
        try {
            const result = await fetchPost(`api/app/WorkRequest/SaveAccidents`, { 
                SiteId: siteId, 
                WorkRequestId: workRequestId,
                FmsWorkRequestToAccident: list
            });
            setAccidents(list);
            refreshList();
        } catch(error) {
            showMessage(error.message);
        }
        setLoading(false);
    }

    const updateComplaints = async (list) => {
        setLoading(true);
        try {
            const result = await fetchPost(`api/app/WorkRequest/SaveComplaints`, { 
                SiteId: siteId, 
                WorkRequestId: workRequestId,
                FmsWorkRequestToComplaint: list
            });
            setComplaints(list);
            refreshList();
        } catch(error) {
            showMessage(error.message);
        }
        setLoading(false);
    }

    const refresh = async () => {
        refreshList();
        fetch();
    }

    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: 'facilities' });
                                }} active={tab=='facilities'?true:false} title="시설목록" />
                            </TabTitleGroup>
                            <TabTitleGroup>
                                <TabTitle onPress={() => {
                                    navigation.setParams({ tab: 'history' });
                                }} active={tab=='history'?true:false} title="작업이력" />
                                {Util.get(data, 'WorkDetailType.Code') == 'ACCIDENT' && (
                                    <TabTitle onPress={() => {
                                        navigation.setParams({ tab: 'accidents' });
                                    }} active={tab=='accidents'?true:false} title="사고목록" />
                                )}
                                {Util.get(data, 'WorkDetailType.Code') == 'COMPLAINT' && (
                                    <TabTitle onPress={() => {
                                        navigation.setParams({ tab: 'complaints' });
                                    }} active={tab=='complaints'?true:false} title="민원목록" />
                                )}
                                <TabTitle onPress={() => {
                                    navigation.setParams({ tab: 'material' });
                                }} active={tab=='material'?true:false} title="자재목록" />
                            </TabTitleGroup>
                        </TabHeader>
                        <TabContent>
                            <TabItem active={tab=='info'?true:false}>
                                <Form.Container id="work-complete-form" onAction={onAction}>
                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>지시제목</Form.Label></Form.Title>
                                        <Controller name="Title" defaultValue={Util.get(data, "Title")} control={control}
                                            as={<Form.Input defaultValue={Util.get(data, "Title")} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>작업상태</Form.Label></Form.Title>
                                        <Controller name="WorkProgress.Name" defaultValue={Util.get(data, "WorkProgress.Name")} control={control}
                                            as={<Form.Input defaultValue={Util.get(data, "WorkProgress.Name")} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>작업시작일</Form.Label></Form.Title>
                                        <Controller name="StartDate" defaultValue={Util.get(data, "StartDate")} control={control}
                                            as={<Form.Input defaultValue={Util.getDateString(data, "StartDate")} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>작업종료일</Form.Label></Form.Title>
                                        <Controller name="EndDate" defaultValue={Util.get(data, "EndDate")} control={control}
                                            as={<Form.Input defaultValue={Util.getDateString(data, "EndDate")} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>작업자</Form.Label></Form.Title>
                                        <Controller name="WorkerUser.Name" defaultValue={Util.get(data, "WorkerUser.Name")} control={control}
                                            as={<Form.Input defaultValue={Util.get(data, "WorkerUser.Name")} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>업체명</Form.Label></Form.Title>
                                        <Controller name="WorkPartnerName" defaultValue={Util.get(data, "WorkPartnerName")} control={control}
                                            as={<Form.Input defaultValue={data.WorkPartnerName} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>금액</Form.Label></Form.Title>
                                        <Controller name="WorkPrice" defaultValue={Util.get(data, "WorkPrice")} control={control}
                                            as={<Form.Input defaultValue={data.WorkPrice} editable={false} />}
                                        />
                                    </Form.Field>
                                    
                                    {/*
                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>작업예정일</Form.Label></Form.Title>
                                        <Controller name="WorkDueDate" defaultValue={Util.get(data, "WorkDueDate")} control={control}
                                            as={<Form.Input defaultValue={Util.getDateString(data, "WorkDueDate")} editable={false} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.Title style={{width:titleWidth}}><Form.Label>종료예정일</Form.Label></Form.Title>
                                        <Controller name="WorkEndDate" defaultValue={Util.get(data, "WorkEndDate")} control={control}
                                            as={<Form.DatePicker date={data.WorkEndDate} editable={false} />}
                                        />
                                    </Form.Field>
                                    */}

                                    <Form.Field>
                                        <Form.TitleTop style={{width:titleWidth}}><Form.Label>첨부파일</Form.Label></Form.TitleTop>
                                        <Controller name="CmFile" defaultValue={Util.get(data, "CmFile")} control={control}
                                            as={<Form.UploadFile type={UploadFileType.Image} editable={false} defaultFile={data.CmFile} />}
                                        />
                                    </Form.Field>

                                    <Form.Field>
                                        <Form.TitleTop style={{width:titleWidth}}><Form.Label>신청내용</Form.Label></Form.TitleTop>
                                        <Controller name="FmsWorkRequest.Content" defaultValue={Util.get(data, "FmsWorkRequest.Content")} control={control}
                                            as={
                                                <Form.Input placeholder="신청내용" defaultValue={Util.get(data, "FmsWorkRequest.Content")} 
                                                    onChangeText={(text) => {
                                                        setValue("FmsWorkRequest.Content", text);
                                                    }}
                                                    multiline={true} editable={true} />
                                            }
                                        />
                                    </Form.Field>
                                    <Form.Regist name="FmsWorkRequest.Content" value={Util.get(data, "FmsWorkRequest.Content")} />

                                    {!config.UseWorkAutoOrder && (
                                    <Form.Field>
                                        <Form.TitleTop style={{width:titleWidth}}><Form.Label>지시내용</Form.Label></Form.TitleTop>
                                        <Controller name="FmsWorkOrder.Content" defaultValue={Util.get(data, "FmsWorkOrder.Content")} control={control}
                                            as={
                                                <Form.Input placeholder="지시내용" defaultValue={Util.get(data, "FmsWorkOrder.Content")} 
                                                    onChangeText={(text) => {
                                                        setValue("FmsWorkOrder.Content", text);
                                                    }}
                                                    multiline={true} editable={true} />
                                            }
                                        />
                                    </Form.Field>
                                    )}
                                    <Form.Regist name="FmsWorkOrder.Content" value={Util.get(data, "FmsWorkOrder.Content")} />

                                    {!config.UseWorkAutoOrder && (
                                    <Form.Field>
                                        <Form.TitleTop style={{width:titleWidth}}><Form.Label>작업요약</Form.Label></Form.TitleTop>
                                        <Controller name="Content" defaultValue={Util.get(data, "Content")} control={control}
                                            as={
                                                <Form.Input placeholder="작업요약" defaultValue={Util.get(data, "Content")} 
                                                    onChangeText={(text) => {
                                                        setValue("Content", text);
                                                    }}
                                                    multiline={true} editable={true} />
                                            }
                                        />
                                    </Form.Field>
                                    )}
                                    <Form.Regist name="Content" value={Util.get(data, "Content")} />

                                    <Form.Field>
                                        <Form.TitleTop style={{width:titleWidth}}><Form.Label>승인내역</Form.Label></Form.TitleTop>
                                        <Controller name="ConfirmDesc" defaultValue={Util.get(data, "ConfirmDesc")} control={control}
                                            as={                                    
                                                <Form.Input placeholder="승인내역" defaultValue={Util.get(data, "ConfirmDesc")} 
                                                    onChangeText={(text) => {
                                                        setValue("ConfirmDesc", text);
                                                    }}
                                                    multiline={true} editable={true} />
                                            }
                                        />
                                    </Form.Field>
                                    <Form.Regist name="ConfirmDesc" value={Util.get(data, "ConfirmDesc")} />

                                    <Form.Field style={{ height:30 }}>
                                    </Form.Field>
                                </Form.Container>
                            </TabItem>
                            <TabItem active={tab=='facilities'?true:false}>
                                <Facilities navigation={navigation} 
                                    keys={{SiteId:siteId, WorkRequestId: workRequestId}}
                                    facilities={facilities} setFacilities={setFacilities} editable={false} />
                            </TabItem>
                            <TabItem active={tab=='history'?true:false} lazy={true}>
                                <WorkHistory siteId={siteId} workRequestId={workRequestId} 
                                    startDate={Util.getDateString(data, "StartDate")} 
                                    endDate={Util.getDateString(data, "EndDate")} 
                                    editable={true} creatable={false} auth={auth} onCallback={(action) => {
                                        console.log('onCallback - action : ' + action);
                                        refresh();
                                        if(action == 'close') {
                                            navigation.pop();
                                        }
                                    }} />
                            </TabItem>
                            {Util.get(data, 'WorkDetailType.Code') == 'ACCIDENT' && (
                                <TabItem active={tab=='accidents'?true:false}>
                                    <Accidents navigation={navigation} 
                                        keys={{SiteId:siteId, WorkRequestId: workRequestId}}
                                        accidents={accidents} setAccidents={updateAccidents} editable={true} />
                                </TabItem>
                            )}
                            {Util.get(data, 'WorkDetailType.Code') == 'COMPLAINT' && (
                                <TabItem active={tab=='complaints'?true:false}>
                                    <Complaints navigation={navigation} 
                                        keys={{SiteId:siteId, WorkRequestId: workRequestId}}
                                        complaints={complaints} setComplaints={updateComplaints} editable={true} />
                                </TabItem>
                            )}
                            <TabItem active={tab=='material'?true:false} alwaysReload={true}>
                                <Materials siteId={siteId} workRequestId={workRequestId} />
                            </TabItem>
                        </TabContent>
                    </Tab>
                    {loading && <Form.Loading />}
                </Fragment>
            </BottomTabBarLayout>
            {promptParams.show && (
                <PromptContent navigation={navigation} setLoading={setLoading} refreshList={refreshList} setPromptParams={setPromptParams} {...promptParams} />
            )}
        </>
    );
};

Screen.navigationOptions = ({navigation}) => { 
    const { auth } = useAuth(navigation);

    return { 
        header: () => (
            <Header 
                navigation={navigation} 
                title={`작업완료`}
                main={false}
                buttons={
                    <Fragment>
                        {auth.Update && auth.Action2 && <Form.ActionButton id="work-complete-form" navigation={navigation} type="success" action="approval" title="승인" />}
                    </Fragment>
                }
            /> 
        )
    } 
};

export default Screen;