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 facility = item.CmFacility;
    return (
        <View style={{
            ...ListStyle.itemContainer, 
            borderTopWidth: 0, 
            backgroundColor: (zebra?'#fdfdfd':'#fff'),
        }}>
            <View style={{...ListStyle.vertical}}>
                <View style={{...ListStyle.horizon}}>
                    <Text style={{...ListStyle.rounded}}>{Util.get(facility, "CmBuilding.Name")}</Text>
                    {Util.get(facility, "CmFloor.Name") && (
                        <Fragment>
                            <Text>&nbsp;</Text>
                            <Text style={{...ListStyle.rounded}}>{Util.get(facility, "CmFloor.Name")}</Text>
                        </Fragment>
                    )}
                    </View>
                <Text style={{...ListStyle.text}}>
                    <Text>{Util.get(facility, "FirstClass.Name")}&nbsp;&nbsp;</Text>
                    {Util.get(facility, "SecondClass.Name") && (
                        <Fragment>
                            <RightArrow /><Text>&nbsp;&nbsp;{Util.get(facility, "SecondClass.Name")}&nbsp;&nbsp;</Text>
                        </Fragment>
                    )}
                    {Util.get(facility, "ThirdClass.Name") && (
                        <Fragment>
                            <RightArrow /><Text>&nbsp;&nbsp;{Util.get(facility, "ThirdClass.Name")}</Text>
                        </Fragment>
                    )}
                </Text>
                <Text style={{...ListStyle.textLight}}>
                    {Util.get(facility, "Name")}
                </Text>
            </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, facilities, setFacilities, editable}) => {
    const { openPopup } = usePopup();

    const appendFacilities = (list) => {
        let appendList = [];
        for(let add of list) {
            if(typeof facilities.find(item => item.FacilityCode == add.FacilityCode) === 'undefined') {
                appendList.push({
                    ...keys,
                    FacilityCode:add.FacilityCode,
                    CmFacility: add
                });
            }
        }

        if(appendList.length > 0) {
            setFacilities([...facilities, ...appendList]);
        }
    }

    const removeFacility = (remove) => {
        const copied = [...facilities];
        const found = copied.find(item => item.FacilityCode == remove.FacilityCode);
        const index = copied.indexOf(found);
        if(index != -1) copied.splice(index, 1);
        setFacilities([...copied]);
    }

    return (
        <EmptyLayout>
            <SearchListContainer>
                <SearchList data={facilities} renderItem={({ item, index }) => {
                        return (
                            <Item item={item} index={index} onDelete={removeFacility} editable={editable} />
                        )
                    }}
                    ListEmptyComponent={<EmptyView list={facilities} emptyTitle="시설목록을 추가하세요." />}
                />
                {editable && (
                    <CreateButton onPress={() => {
                        openPopup('/Popup/Facility/Index', {siteId: keys.SiteId}, (results) => {
                            appendFacilities(results);
                        });
                    }} />
                )}
            </SearchListContainer>
        </EmptyLayout> 
    );
}