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

import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import ItemPrice from './ItemPrice';

const PriceListView = (props) => {
    const {setFilterId, filters, dataPrice, filterId} = props;
    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>
            <FlatList
                style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
                keyExtractor={(item) => item.id}
                data={dataPrice}
                ListHeaderComponent={() =>
                    <View style={[styles.container]}>
                        <View style={[styles.headerContent, {flex: 0.3, justifyContent: 'flex-start', alignItems: 'center',}]}>
                            <Text>Tên</Text>
                            <Image source={R.images.iconSort} style={styles.imgIcon} />
                        </View>
                        <View style={[styles.headerContent, {flex: 1.5}]}>
                            <Text>Tỷ lệ thay đổi</Text>
                            <Image source={R.images.iconSort} style={styles.imgIcon} />
                        </View>
                        <View style={[styles.headerContent]}>
                            <Text>Giá mở/đóng</Text>
                            <Image source={R.images.iconSort} style={styles.imgIcon} />
                        </View>
                        <View style={[styles.headerContent]}>
                            <Text>Giá cao/thấp</Text>
                            <Image source={R.images.iconSort} style={styles.imgIcon} />
                        </View>
                    </View>}
                renderItem={({item}) => <ItemPrice item={item}/>}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    headerContainer: {
        paddingVertical: 10,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    itemFillter: {
        borderRadius: WIDTHXD(40),
        paddingVertical: HEIGHTXD(10),
        paddingHorizontal: WIDTHXD(25),
        borderWidth: 1,
        borderColor: '#929292',
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: WIDTHXD(20),
    },
    txtFillter: {
        fontSize: getFontXD(36),
        color: '#929292',
        fontWeight: 'bold',
    },
    txtTitle: {
        fontSize: getFontXD(39),
        fontWeight: 'bold',
    },
    container: {
        flex: 1,
        flexDirection: 'row',
        marginHorizontal: WIDTHXD(30),
        marginBottom: HEIGHTXD(10)

    },
    headerContent: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    imgIcon: {
        width: WIDTHXD(20),
        height: WIDTHXD(35),
        resizeMode: 'contain',
    },
});

export default PriceListView;
