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 = ({key, item, name, index}) => {
    const zebra = index % 2 == 0 ? true : false;
    return (
        <TouchableOpacity style={[ListStyle.itemContainer, {backgroundColor: (zebra?'#fdfdfd':'#fff')}]}>
            <View style={{...ListStyle.vertical, flex:1}}>
                <Text style={{...ListStyle.rounded}}>{Util.get(item, "AccidentTypeName")}</Text>
                <Text style={{...ListStyle.text}}>{Util.get(item, "Name")}</Text>
                <Text style={{...ListStyle.text}}>{Util.get(item, "DepartmentName")}</Text>
                <View style={[ListStyle.horizon, {marginRight:15, flex:1, justifyContent:'space-between'}]}>
                    <Text style={{...ListStyle.textLightGray}}>사고발생일</Text>
                    <Text style={{...ListStyle.textLightGray}}>{Util.getDateString(item, "StartDate")}</Text>
                </View>
                <View style={[ListStyle.horizon, {marginRight:15, flex:1, justifyContent:'space-between'}]}>
                    <Text style={{...ListStyle.textLightGray}}>조치완료일</Text>
                    <Text style={{...ListStyle.textLightGray}}>{Util.getDateString(item, "EndDate")}</Text>
                </View>
            </View>
            <Form.Regist name={`${name}.AccidentTypeId`} />
            <Form.Regist name={`${name}.AccidentTypeName`} />
            <Form.Regist name={`${name}.AccidentId`} />
            <Form.Regist name={`${name}.Name`} />
            <Form.Regist name={`${name}.DepartmentId`} />
            <Form.Regist name={`${name}.DepartmentName`} />
            <Form.Regist name={`${name}.StartDate`} />
            <Form.Regist name={`${name}.EndDate`} />
        </TouchableOpacity>
    )
}

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-accident-list-form" style={{paddingLeft:0, paddingTop:0, paddingRight:0, paddingBottom:0}}>
                {Util.get(data, "DataObject.Accidents") && Util.get(data, "DataObject.Accidents").map((item, index) => {
                    return (
                        <Item key={`accidents-${index}`} 
                            name={`DataObject.Accidents[${index}]`}
                            item={item}
                            index={index} />
                    )
                })}
            </Form.Container>
        </EmptyLayout>
    )
};
