import {Button, Text, View, StyleSheet, TouchableOpacity, Image, ScrollView, GestureResponderEvent} from "react-native";
import {useAppDispatch} from "../../redux/store";
import * as process from "process";
import {responsiveFontSize, responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {background, blue, gray} from "../../css/colors";
import {RFPercentage} from "react-native-responsive-fontsize";
import DText from "../../components/DText/DText";
import DTitle from "../../components/DTitle/DTitle";
import {ScreenStackHeaderLeftView} from "react-native-screens";
import Separator from "../../components/Separator/Separator";
import {BottomSheetModal} from "@gorhom/bottom-sheet";
import {useMemo, useRef, useState} from "react";
import {openApp} from "rn-openapp";
import SelectProductModal from "../../components/Modals/SelectProductModal/SelectProductModal";
import selectProductModal from "../../components/Modals/SelectProductModal/SelectProductModal";

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

}
const SettingsElement: React.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>{title}</DText>
            </View>
        </TouchableOpacity>

    )
}
type HistoryElementProps = {
    cost: number;
    description: string;
    color: string;
}
const HistoryElement: React.FC<HistoryElementProps> = ({cost, description, color}) => {
    const formatNumber = (n: number): string => n >= 0 ? `+${n}` : `${n}`;
    return (
        <View style={styles.historyElementContainer}>
            <DText style={{
                fontSize: responsiveFontSize(2),
                color: color,
                fontWeight: "500"
            }}>{formatNumber(cost)} руб</DText>
            <DText style={{fontSize: responsiveFontSize(1.5), color: gray, fontWeight: "400"}}>{description}</DText>
        </View>
    )
}

function ProfileScreen() {

    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
    const snapPoints = useMemo(() => ['25%', '40%'], []);
    const [modalVisible, setModalVisible] = useState(false);
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <View style={styles.headerInfo}>
                    <DTitle style={styles.headerText}>Ваш баланс: 228 руб</DTitle>
                    <DTitle style={styles.headerText}>Собрано товаров: 1337 шт</DTitle>
                </View>

            </View>
            <View style={styles.content}>
                <View style={styles.actionsCarouselContainer}>
                    <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 onPress={() => {
                            openApp('assemblrprintingservice');
                        }} icon={require('assets/icons/settings/printer.png')} title={'Принтеры'}/>
                    </ScrollView>
                </View>
                <Separator/>
                <View style={styles.historyContainer}>
                    <DTitle>История операций</DTitle>
                    <ScrollView
                        showsHorizontalScrollIndicator={false}
                        showsVerticalScrollIndicator={false}
                        style={styles.historyElements}
                        contentContainerStyle={styles.historyElementsContainer}>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                        <HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
                    </ScrollView>
                </View>
            </View>
            <BottomSheetModal ref={bottomSheetModalRef}
                              snapPoints={snapPoints}
                              onDismiss={() => {
                                  setModalVisible(false);
                              }}
            >
                <View style={{flex: 1}}>
                    <DText>хуй</DText>
                </View>
            </BottomSheetModal>

            <View style={[styles.overlay, {display: modalVisible ? 'flex' : 'none'}]}/>

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        // backgroundColor: "red",
        flex: 1,
        display: "flex",
        flexDirection: "column",
    },
    overlay: {
        ...StyleSheet.absoluteFillObject,  // Это заполнит родительский элемент абсолютным позиционированием
        backgroundColor: 'rgba(104, 104, 104, 0.50)',
        zIndex: 2,  // Значение zIndex больше, чем у content, поэтому overlay будет выше
    },
    historyElementContainer: {
        width: "100%",
        backgroundColor: "white",
        borderRadius: RFPercentage(2),
        padding: RFPercentage(2),
        elevation: 1
    },
    historyContainer: {
        paddingVertical: responsiveHeight(2),
        flex: 1,
        // backgroundColor: "red"
    },
    historyElements: {
        marginTop: responsiveHeight(3),
    },
    historyElementsContainer: {
        rowGap: responsiveHeight(2),
    },
    header: {
        backgroundColor: blue,
        borderBottomLeftRadius: RFPercentage(3),
        borderBottomRightRadius: RFPercentage(3),
        elevation: 10,
        paddingHorizontal: responsiveWidth(5),
        paddingVertical: responsiveHeight(3),
        color: "white",
        display: "flex",
        flexDirection: "row"
    },
    headerText: {
        color: "white"
    },
    headerInfo: {
        // backgroundColor: "red"
    },
    actionsCarousel: {
        flexDirection: "row",
        columnGap: responsiveWidth(3),
    },
    actionsCarouselContainer: {
        // backgroundColor: "red",
        paddingVertical: responsiveHeight(5)
    },
    actionsCarouselImage: {
        resizeMode: "contain",
        flex: 1,
        width: "100%",
        height: "100%",
    },
    actionsCarouselImageWrapper: {
        width: RFPercentage(10),
        height: RFPercentage(10),
        backgroundColor: "white",
        borderRadius: 100,
        borderWidth: RFPercentage(0.3),
        padding: RFPercentage(1),
        justifyContent: "center",
        alignItems: "center"

    },
    actionsCarouselElementContainer: {
        display: "flex",
        alignItems: "center",

    },
    content: {
        flex: 1,
        paddingHorizontal: responsiveWidth(5),
    },

})
export default ProfileScreen;