import React, { Fragment, useState, useRef, useEffect } from 'react';
import Styled from 'styled-components/native';
import SearchList, { SearchListContainer } from '~/Components/Listing/SearchList';
import EmptyView from '~/Components/Listing/EmptyView';
import { CreateButton, ListStyle, RightArrow } from '~/Components/Listing/Search';
import EmptyLayout from '~/Components/Layouts/EmptyLayout';
import { Util } from '~/Utils/utils';
import { usePopup } from '~/Components/UIControls/Popup';
import { TouchableOpacity, View, Text } from 'react-native';
import Checkbox from '~/Components/UIControls/Checkbox';
import Icon from '~/Components/UIControls/Icon';

const Item = ({item, index, onDelete=(item)=>{}, editable}) => {
    const zebra = index % 2 == 0 ? true : false;
    const accident = item.FmsAccident;
    return (
        <View style={{
            ...ListStyle.itemContainer, 
            backgroundColor: (zebra?'#fdfdfd':'#fff'),
        }}>
            <View style={{ ...ListStyle.vertical, flex:1}}>
                <View style={{ ...ListStyle.horizon,width:'100%',justifyContent:"space-between"}}>
                    <Text style={{ ...ListStyle.text,color:"#0b83e6" }}>
                        {Util.get(accident, "AccidentTypeName")}
                    </Text>
                    <Text style={{ ...ListStyle.text,paddingLeft:10,flex:1 }}>
                        {Util.get(accident, "Name")}
                    </Text>
                </View>
                <View style={{ ...ListStyle.horizon,width:'100%',marginTop:10, justifyContent:"space-between"}}>
                    <Text style={{ ...ListStyle.textGray, lineHeight: 18 }}>
                        {'사고발생일'}
                    </Text>
                    <Text style={{ ...ListStyle.textGray, textAlign: "left", paddingRight:15, lineHeight: 18  }}>
                        {Util.get(accident, "Dates.StartDate")}
                    </Text>
                </View>
                <View style={{ ...ListStyle.horizon,width:'100%',marginTop:5, justifyContent:"space-between"}}>
                    <Text style={{ ...ListStyle.textGray, lineHeight: 18 }}>
                        {'조치완료일'}
                    </Text>
                    <Text style={{ ...ListStyle.textGray, textAlign: "left", paddingRight:15, lineHeight: 18  }}>
                        {Util.get(accident, "Dates.EndDate")}
                    </Text>
                </View>
            </View>
            {editable && (
                <TouchableOpacity onPress={() => {onDelete(item)}} style={{marginRight:15}}>
                    <Icon iconFamily="AntDesign" iconName="closecircle" color="#9aa3ac" size={40} />
                </TouchableOpacity>
            )}
        </View>
    )
}

export default Screen = ({navigation, keys, accidents, setAccidents, editable}) => {
    const { openPopup } = usePopup();

    const appendAccidents = (list) => {
        let appendList = [];
        for(let add of list) {
            if(typeof accidents.find(item => item.AccidentId == add.AccidentId) === 'undefined') {
                appendList.push({
                    ...keys,
                    AccidentId:add.AccidentId,
                    FmsAccident: add
                });
            }
        }

        if(appendList.length > 0) {
            setAccidents([...accidents, ...appendList]);
        }
    }

    const removeAccident = (remove) => {
        const copied = [...accidents];
        const found = copied.find(item => item.AccidentId == remove.AccidentId);
        const index = copied.indexOf(found);
        if(index != -1) copied.splice(index, 1);
        setAccidents([...copied]);
    }

    return (
        <EmptyLayout>
            <SearchListContainer>
                <SearchList data={accidents} renderItem={({ item, index }) => {
                        return (
                            <Item item={item} index={index} onDelete={removeAccident} editable={editable} />
                        )
                    }}
                    ListEmptyComponent={<EmptyView list={accidents} emptyTitle="사고목록을 추가하세요." />}
                />
                {editable && (
                    <CreateButton onPress={() => {
                        openPopup('/Popup/Accident/Index', {siteId: keys.SiteId}, (results) => {
                            appendAccidents(results);
                        });
                    }} />
                )}
            </SearchListContainer>
        </EmptyLayout> 
    );
}