import {GestureResponderEvent, Image, ScrollView, StyleSheet, TouchableOpacity, View} from "react-native";
import DText from "../../components/DText/DText";
import {RFPercentage} from "react-native-responsive-fontsize";
import {FC} from "react";
import assemblyApi from "../../api/assemblyApi";
import Toast from "react-native-toast-message";
import {reset} from "../../features/assembly/assemblySlice";
import {useDispatch} from "react-redux";
import {responsiveWidth} from "react-native-responsive-dimensions";

type SettingsElementProps = {
    icon: any;
    title: string;
    onPress?: (event: GestureResponderEvent) => void

}
const SettingsElement: FC<SettingsElementProps> = ({icon, title, onPress}) => {
    return (
        <TouchableOpacity onPress={onPress}>

            <View style={styles.actionsCarouselElementContainer}>
                <View style={styles.actionsCarouselImageWrapper}>
                    <Image style={styles.actionsCarouselImage} source={icon}/>
                </View>
                <DText style={{textAlign: "center"}}>{title}</DText>
            </View>
        </TouchableOpacity>

    )
}

const SettingsView: FC = () => {
    const dispatch = useDispatch();
    return (
        <ScrollView horizontal={true}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={styles.actionsCarousel}
        >
            <SettingsElement icon={require('assets/icons/settings/withdraw.png')} title={'Вывод'}/>
            <SettingsElement icon={require('assets/icons/settings/statistics.png')} title={'Статистика'}/>
            <SettingsElement icon={require('assets/icons/settings/printer.png')} title={'Принтеры'}/>
            <SettingsElement onPress={() => {
                assemblyApi.cancel().then(response => {

                    Toast.show({
                        type: response.ok ? "success" : "error",
                        text1: "Отмена сборки",
                        text2: response.message,
                    });
                    dispatch(reset());
                })
            }} icon={require('assets/icons/settings/close.png')} title={'Отменить сборку'}/>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    actionsCarouselElementContainer: {
        display: "flex",
        alignItems: "center",
        maxWidth: RFPercentage(10),
    },
    actionsCarouselImageWrapper: {
        width: RFPercentage(10),
        height: RFPercentage(10),

        backgroundColor: "white",
        borderRadius: 100,
        borderWidth: RFPercentage(0.3),
        padding: RFPercentage(1.5),
        justifyContent: "center",
        alignItems: "center"
    },
    actionsCarouselImage: {
        resizeMode: "contain",
        flex: 1,
        width: "100%",
        height: "100%",
    },
    actionsCarousel: {
        flexDirection: "row",
        columnGap: responsiveWidth(3),
    },
});

export default SettingsView;