import React, {useState} from 'react';
import {
    View,
    Text,
    FlatList,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
} from 'react-native';

import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item';
import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';

const EscrowView = (props) => {
    const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, filterId, data} = props;
    const navigate = useNavigation();

    return (
        <View style={{flex: 1}}>
            <View style={styles.headerContainer}>
                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                    {filters.map((e) => (
                        <TouchableOpacity
                            key={e.id}
                            onPress={() => setFilterId(e.id)}
                            style={[
                                styles.itemFillter,
                                filterId == e.id ? {borderColor: '#1473E6'} : null,
                            ]}>
                            <Text
                                style={[
                                    styles.txtFillter,
                                    filterId == e.id ? {color: '#1473E6'} : {},
                                ]}>{e.name}</Text>
                        </TouchableOpacity>
                    ))}
                </ScrollView>
            </View>

            {data.length == 0 && !isRefresh ? (
                <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
                    <AppText
                        i18nKey={'NoData'}
                        style={{
                            fontSize: 18,
                            fontWeight: 'bold',
                        }}></AppText>
                </View>
            ) : (
                <FlatList
                    style={{marginTop: HEIGHTXD(15)}}
                    keyExtractor={(item) => item.id}
                    data={data}
                    refreshing={isRefresh}
                    onRefresh={onRefresh}
                    onEndReachedThreshold={0.01}
                    onEndReached={(info) => {
                        onLoadMore();
                    }}
                    renderItem={({item, index}) => <Item item={item}
                                                         isEndItem={index == (data.length - 1)}
                                                         onPress={(item) => navigate.navigate(PRODUCTDETAIL, {id: item.commoditiy.id, name: item.commoditiy.name})}/>}
                />
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    headerContainer: {
        paddingVertical: 10,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    itemFillter: {
        borderRadius: 10,
        paddingVertical: 5,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: '#929292',
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 10,
    },
    txtFillter: {
        fontSize: getFontXD(36),
        color: '#929292',
        fontWeight: 'bold',
    },
    txtTitle: {
        fontSize: getFontXD(46),
        fontWeight: 'bold',
    },
});

export default EscrowView;