import React, { Fragment, useState } from 'react';
import EmptyLayout from '~/Components/Layouts/EmptyLayout';
import Form from '~/Components/Form';
import { Util } from '~/Utils/utils';
import { View, Text, TouchableOpacity } from 'react-native';
import SearchList, { SearchListContainer } from '~/Components/Listing/SearchList';
import EmptyView from '~/Components/Listing/EmptyView';
import { ListStyle } from '~/Components/Listing/Search';
import Theme from '~/Themes';

const CheckItem = ({item, name, index}) => {
    const zebra = index % 2 == 0 ? true : false;
    return (
        <View style={[ListStyle.itemContainer, {backgroundColor: (zebra?'#595959':'#393939'), borderColor:'black', marginRight:15}]}>
            <View style={{...ListStyle.horizon, flex:1, justifyContent:'space-between', marginRight:15}}>
                <Text style={{...ListStyle.textMedium, color:'white'}}>{Util.getDateString(item, "CheckDate")}</Text>
                <Text style={{...ListStyle.textMedium, color:'white', flex:1, textAlign:'right'}}>{Util.get(item, "TextResult")}</Text>
            </View>
            <Form.Regist name={`${name}.CheckDate`} />
            <Form.Regist name={`${name}.TextResult`} />
        </View>
    )
}

const Item = ({item, name, index, businessFieldName, onPress=()=>{}}) => {
    const zebra = index % 2 == 0 ? true : false;
    const [show, setShow] = useState(false);
    return (
        <Fragment>
            <TouchableOpacity onPress={() => { setShow(!show) }} style={[ListStyle.itemContainer, {backgroundColor: (zebra?'#fdfdfd':'#fff')}]}>
                <View style={{...ListStyle.vertical, flex:1}}>
                    <View style={{...ListStyle.horizon, marginBottom:8}}>
                        <Text style={{...ListStyle.fillRounded, backgroundColor:Theme.WorkTypeColor[Util.get(item, "WorkTypeName", "")]}}>
                            {Util.get(item, "WorkTypeName")}
                        </Text>
                        <Text>&nbsp;&nbsp;</Text>
                        <Text style={{
                            ...ListStyle.fillRounded,
                            backgroundColor:Theme.WorkProgressColor[Util.get(item, "WorkProgressName")]
                        }}>{Util.get(item, "WorkProgressName")}</Text>
                    </View>
                    <Text style={{...ListStyle.textMedium}}>
                        {Util.get(item, "Title")}
                    </Text>
                    <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                        <Text style={{...ListStyle.textLightGrayLarge}}>시작일</Text>
                        <Text style={{...ListStyle.textLightGrayLarge}}>{Util.getDateString(item, "RequestDate")}</Text>
                    </View>
                </View>
                <Form.Regist name={`${name}.WorkRequestId`} />
                <Form.Regist name={`${name}.BusinessFieldId`} />
                <Form.Regist name={`${name}.RequestDate`} />
                <Form.Regist name={`${name}.WorkTypeId`} />
                <Form.Regist name={`${name}.WorkProgressId`} />
                <Form.Regist name={`${name}.WorkTypeName`} />
                <Form.Regist name={`${name}.WorkProgressName`} />
                <Form.Regist name={`${name}.Title`} />
                <Form.Regist name={`${name}.WorkUsers`} />
                <Form.Regist name={`${name}.WorkPartnerId`} />
                <Form.Regist name={`${name}.WorkPartnerName`} />
                <Form.Regist name={`${name}.StartDate`} />
                <Form.Regist name={`${name}.EndDate`} />
            </TouchableOpacity>
            <View style={[ListStyle.itemContainer, {
                display:show ? "flex": "none", 
                flexDirection:"column", 
                backgroundColor: '#292929', 
                borderColor:'black',
                alignItems:"flex-start"
            }]}>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>거래처</Text>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>{Util.get(item, "WorkPartnerName")}</Text>
                </View>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>작업자</Text>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>{Util.get(item, "WorkUsers")}</Text>
                </View>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>시작일시</Text>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>{Util.getDateTimeString(item, "StartDate")}</Text>
                </View>
                <View style={{...ListStyle.horizon, width:'100%', paddingRight:15, justifyContent:'space-between'}}>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>종료일시</Text>
                    <Text style={{...ListStyle.textMedium, color:'white'}}>{Util.getDateTimeString(item, "EndDate")}</Text>
                </View>
                {Util.get(item, "CheckItems") && Util.get(item, "CheckItems").map((checkItem, checkItemIndex) => {
                    return (
                        <Fragment key={`item-${index}-${checkItemIndex}`}>
                            <CheckItem item={checkItem} name={`${name}.CheckItems[${checkItemIndex}]`} index={checkItemIndex} />
                        </Fragment>
                    )
                })}
            </View>
        </Fragment>
    )
}

export default Screen = ({navigation, data, setData, setValue, errors}) => {
    const action = navigation.getParam('action', Form.VIEW);
    const editable = navigation.getParam('editable', action == Form.VIEW ? false : true);
    const setEditable = (value) => { navigation.setParams({editable: value}) };
    const refreshList = navigation.getParam('refreshList', ()=>{});
    const siteId = navigation.getParam('siteId', 0);
    const addDate = navigation.getParam('addDate', new Date());
    const setAddDate = (value) => { navigation.setParams({addDate: value}) };
    const businessFieldId = navigation.getParam('businessFieldId', 0);

    return (
        <EmptyLayout>
            <Form.Container id="daily-report-work-list-form" style={{paddingLeft:0, paddingTop:0, paddingRight:0, paddingBottom:0}}>
                {Util.get(data, "DataObject.Works") && Util.get(data, "DataObject.Works").map((businessField, businessFieldIndex) => {
                    return (
                        <Fragment key={`works-${businessFieldIndex}`}>
                            {Util.get(businessField, "List") && Array.isArray(Util.get(businessField, "List")) && Util.get(businessField, "List").length > 0 && (
                                <Fragment>
                                    <Form.FieldSetHead style={{width:'100%', left:0}}>
                                        <Form.Legend><Form.LegendLabel>{Util.get(businessField, "BusinessFieldName")}</Form.LegendLabel></Form.Legend>
                                    </Form.FieldSetHead>
                                    <Form.Regist name={`DataObject.Works[${businessFieldIndex}].BusinessFieldId`} />
                                    <Form.Regist name={`DataObject.Works[${businessFieldIndex}].BusinessFieldName`} />

                                    {Util.get(businessField, "List") && Util.get(businessField, "List").map((item, index) => {
                                        return (
                                            <Fragment key={`works-${businessFieldIndex}-${index}`}>
                                                <Item name={`DataObject.Works[${businessFieldIndex}].List[${index}]`} 
                                                    businessFieldName={Util.get(businessField, "BusinessFieldName")}
                                                    item={item} 
                                                    index={index} />
                                            </Fragment>
                                        )
                                    })}
                                </Fragment>
                            )}
                        </Fragment>
                    )
                })}
            </Form.Container>
        </EmptyLayout>
    )
};
