import React, { Fragment, useState, useEffect, useCallback, createRef, useRef } from 'react';
import { View, Text, Alert, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import Styled from 'styled-components/native';
import Header from '~/Components/Layouts/Header';
import { Search, SearchIcon, Line, TextInput, checkFilter, filterValue, ListStyle, DetailIcon, RightArrow, CreateButton } from '~/Components/Listing/Search';
import Checkbox from '~/Components/UIControls/Checkbox';
import Theme from '~/Themes';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import session from '~/Utils/session';
import SearchList, { SearchListContainer } from '~/Components/Listing/SearchList';
import EmptyView from '~/Components/Listing/EmptyView';
import EntitySelect from '~/Components/EntitySelect';
import { useToast } from '~/Components/UIControls/Message';
import { DateTimePicker } from '~/Components/UIControls/DateTimePicker';
import Input from '~/Components/UIControls/Input';
import Form from '~/Components/Form';
import { Util } from '~/Utils/utils';
import { useAuth } from '~/Components/Hooks';
import EmptyLayout from '~/Components/Layouts/EmptyLayout';

// list item
const Item = ({item, index, onPress=()=>{}}) => {
    const zebra = index % 2 == 0 ? true : false;
    return (
        <TouchableOpacity onPress={onPress} style={{
            ...ListStyle.itemContainer, 
            borderTopWidth: 0, 
            backgroundColor: (zebra?'#fdfdfd':'#fff'),
        }}>
            <View style={{...ListStyle.vertical}}>
                <View style={{...ListStyle.horizon}}>
                    <Text style={{...ListStyle.rounded}}>{Util.get(item, "BuildingName")}</Text>
                    {Util.get(item, "FloorName") && (
                        <Fragment>
                            <Text>&nbsp;</Text>
                            <Text style={{...ListStyle.rounded}}>{Util.get(item, "FloorName")}</Text>
                        </Fragment>
                    )}
                </View>
                <Text style={{...ListStyle.text}}>
                    <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>
                <Text style={{...ListStyle.textLight}}>
                    {Util.get(item, "Name")}
                </Text>
                <Text style={{...ListStyle.textGray}}>
                    {Util.get(item, "Manufacturer")} {Util.get(item, "FacilityCapacity")}
                </Text>
            </View>
            <DetailIcon />
        </TouchableOpacity>
    )
}

// list and search
const Screen = ({navigation}) => {
    const siteId = navigation.getParam('siteId', 0);
    const seq = navigation.getParam('seq', 0);
    const [filters, setFilters] = useState({});
    const [list, setList] = useState(null);
    const [page, setPage] = useState(1);
    const [refreshing, setRefreshing] = useState(false);
    const pages = useRef(10);
    const { auth, userinfo } = useAuth(navigation);
    const { showMessage } = useToast();

    // search events...
    const start = () => {
        setRefreshing(true);
    }
    const success = (list, append) => {
        setList(list);
        setRefreshing(false);
    }
    const fail = (e) => {
        showMessage(e.message);
        setRefreshing(false);
    }

    const refreshList = () => {
        setPage('refresh-' + Math.random());
    }

    return (
        <EmptyLayout>
            <SearchListContainer>
                <SearchList page={page} pages={1} setPage={setPage} refreshing={refreshing}
                    data={list} renderItem={({ item, index }) => {
                        return (
                            <Item item={item} index={index} />
                        )
                    }}
                    ListEmptyComponent={<EmptyView list={list} />}
                />
            </SearchListContainer>

            <Search id="relative-facility-search" api={`api/app/ReportHistory/FacilityList?siteId=${siteId}&seq=${seq}`} 
                    page={page} setPage={setPage} limit={50}
                    onStart={start} onSuccess={success} onFailure={fail} />
        </EmptyLayout> 
    );
};

// header
Screen.navigationOptions = ({navigation}) => { 
    return { 
        header: () => <Header 
            navigation={navigation} 
            title="설비정보" 
            buttons={<SearchIcon id="relative-facility-search" />}
        /> 
    } 
};

export default Screen;