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, RightArrow } from '~/Components/Listing/Search';
import Theme from '~/Themes';

const Item = ({item, name, index, businessFieldName}) => {
    const zebra = index % 2 == 0 ? true : false;
    return (
        <Fragment>
            <TouchableOpacity style={[ListStyle.itemContainer, {backgroundColor: (zebra?'#fdfdfd':'#fff')}]}>
                <View style={{...ListStyle.vertical, flex:1}}>
                    <View style={{...ListStyle.horizon, marginBottom:8}}>
                        <Text style={{...ListStyle.rounded}}>{businessFieldName}</Text>
                        {Util.get(item, "ReleaseTypeName") && (
                            <Fragment>
                                <Text>&nbsp;&nbsp;</Text>
                                <Text style={{...ListStyle.rounded}}>{Util.get(item, "ReleaseTypeName")}</Text>
                            </Fragment>
                        )}
                    </View>
                    <Text style={{...ListStyle.text}}>{Util.get(item, "WorkName")}</Text>
                    <View style={{...ListStyle.horizon}}>
                        <Text style={{...ListStyle.text}}>{Util.get(item, "MaterialName")}</Text>
                        <Text>&nbsp;</Text>
                        {Util.get(item, "Standard") ? <Text style={{...ListStyle.text}}>({Util.get(item, "Standard")})</Text> : null}
                        {Util.get(item, "Unit") ? (
                            <Fragment>
                                <Text style={{...ListStyle.textGray, marginLeft:5, marginRight:5}}>|</Text>
                                <Text style={{...ListStyle.text}}>{Util.get(item, "Unit")}</Text>
                            </Fragment>
                        ) : null}
                    </View>
                    <Text style={{...ListStyle.textLightGray}}>
                        <Text>{Util.get(item, "FirstClassName")}&nbsp;&nbsp;</Text>
                        {Util.get(item, "SecondClassName") && (
                            <Fragment>
                                <RightArrow /><Text>&nbsp;&nbsp;{Util.get(item, "SecondClassName")}&nbsp;&nbsp;</Text>
                            </Fragment>
                        )}
                        {Util.get(item, "ThirdClassName") && (
                            <Fragment>
                                <RightArrow /><Text>&nbsp;&nbsp;{Util.get(item, "ThirdClassName")}</Text>
                            </Fragment>
                        )}
                    </Text>
                    <View style={[ListStyle.horizon, {marginRight:15, flex:1, justifyContent:'space-between'}]}>
                        <Text style={{...ListStyle.textLightGray}}>작업자</Text>
                        <Text style={{...ListStyle.textLightGray}}>{Util.get(item, "WorkerName")}</Text>
                    </View>
                    <View style={[ListStyle.horizon, {marginRight:15, flex:1, justifyContent:'space-between'}]}>
                        <Text style={{...ListStyle.textLightGray}}>수량</Text>
                        <Text style={{...ListStyle.textLightGray}}>{Util.get(item, "MaterialCount")}</Text>
                    </View>
                </View>
                <Form.Regist name={`${name}.ReleaseTypeName`} />
                <Form.Regist name={`${name}.FirstClassId`} />
                <Form.Regist name={`${name}.SecondClassId`} />
                <Form.Regist name={`${name}.ThirdClassId`} />
                <Form.Regist name={`${name}.FirstClassName`} />
                <Form.Regist name={`${name}.SecondClassName`} />
                <Form.Regist name={`${name}.ThirdClassName`} />
                <Form.Regist name={`${name}.MaterialName`} />
                <Form.Regist name={`${name}.Standard`} />
                <Form.Regist name={`${name}.WorkName`} />
                <Form.Regist name={`${name}.Unit`} />
                <Form.Regist name={`${name}.MaterialCount`} />
                <Form.Regist name={`${name}.WorkerName`} />
            </TouchableOpacity>
        </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}) };

    return (
        <EmptyLayout>
            <Form.Container id="daily-report-release-list-form" style={{paddingLeft:0, paddingTop:0, paddingRight:0, paddingBottom:0}}>
                {Util.get(data, "DataObject.Materials") && Util.get(data, "DataObject.Materials").map((businessField, businessFieldIndex) => {
                    return (
                        <Fragment key={`materials-${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.Materials[${businessFieldIndex}].BusinessFieldId`} />
                                    <Form.Regist name={`DataObject.Materials[${businessFieldIndex}].BusinessFieldName`} />

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