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';
import moment from 'moment';

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}}>
                <View style={[ListStyle.horizon]}>
                    <Text style={{...ListStyle.rounded}}>{Util.get(item, "FacilityTypeName")}</Text>
                    <Text>&nbsp;&nbsp;</Text>
                    <Text style={{...ListStyle.text}}>{Util.get(item, "MonitoringPointName")}</Text>
                </View>
                
                <View style={[ListStyle.horizon, {paddingRight:15, width:'100%', justifyContent:'space-between'}]}>
                    <Text style={{...ListStyle.textLightGray}}>경보일시</Text>
                    <Text style={{...ListStyle.textLightGray}}>{moment(Util.get(item, "CreatedDateTime")).format('YYYY-MM-DD HH:mm:ss')}</Text>
                </View>
            </View>
            <Form.Regist name={`${name}.FacilityTypeId`} />
            <Form.Regist name={`${name}.FacilityTypeName`} />
            <Form.Regist name={`${name}.FacilityCode`} />
            <Form.Regist name={`${name}.PropertyId`} />
            <Form.Regist name={`${name}.MonitoringPointName`} />
            <Form.Regist name={`${name}.FacilityName`} />
            <Form.Regist name={`${name}.CreatedDateTime`} />
            <Form.Regist name={`${name}.CurrentValue`} />
        </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-alarm-list-form" style={{paddingLeft:0, paddingTop:0, paddingRight:0, paddingBottom:0}}>
                {Util.get(data, "DataObject.Alarms") && Util.get(data, "DataObject.Alarms").map((item, index) => {
                    return (
                        <Item key={`alarms-${index}`} 
                            name={`DataObject.Alarms[${index}]`}
                            item={item}
                            index={index} />
                    )
                })}
            </Form.Container>
        </EmptyLayout>
    )
};
