import {FC} from "react";
import {GestureResponderEvent, Image, StyleSheet, TouchableOpacity, View} from "react-native";
import DText from "../DText/DText";
import {RFPercentage} from "react-native-responsive-fontsize";
import {responsiveWidth} from "react-native-responsive-dimensions";
import {useAppDispatch} from "../../redux/store";
import {openFilter} from "../../features/filterSlice/filterSlice";

const SortingButton: FC = () => {
    const dispatch = useAppDispatch();
    const onPress = (event: GestureResponderEvent) => {
        dispatch(openFilter())
    }
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={styles.container}>

                <View style={styles.imageWrapper}>
                    <Image style={styles.image} source={require('assets/icons/filter.png')}/>
                </View>
                <DText>Фильтр</DText>
            </View>
        </TouchableOpacity>

    )
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        columnGap: responsiveWidth(1),
    },
    imageWrapper: {
        width: RFPercentage(3),
        height: RFPercentage(3)
    },
    image: {
        resizeMode: 'contain',
        width: '100%',
        height: '100%'
    }
});
export default SortingButton;