import React, { useState } from 'react';
import {Button, Image, Modal, Platform, TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native';
import { icons } from "@/constants/icons"
import ColorPicker, {HueSlider, OpacitySlider, Panel1, Preview, Swatches} from "reanimated-color-picker";

// @ts-ignore
export default function MyColorPicker({ onColorSelected }: { onColorSelected: (color: string) => void }) {

    const [showModal, setShowModal] = useState(false);
    const [bgColor, setBgColor] = useState<string>('gray');

    const onSelectColor = ({ hex }: { hex: string }): void => {
        setBgColor(hex);

        if (onColorSelected) {
            onColorSelected(hex);
        }
    };

    const toggleModal = () => {
        setShowModal(prevState => !prevState);
    };

    return (
        <View className="justify-center items-center">
            <TouchableOpacity onPress={toggleModal}>
                {Platform.OS === 'web' ? (
                    <Image
                        source={icons.colorP}
                        // @ts-ignore
                        style={{
                            width: '3vw',
                            height: '3vw',
                            objectFit: 'contain',
                        }}
                    />
                ) : (
                    <Image
                        source={icons.colorP}
                        className="w-8 h-8"
                        resizeMode="contain"
                    />
                )}
            </TouchableOpacity>

            <Modal visible={showModal} animationType="slide" transparent={true}>
                <TouchableWithoutFeedback onPress={toggleModal}>
                    <View className="flex-1 justify-center items-center bg-black/50 p-4">
                        <TouchableWithoutFeedback>
                            <View className="bg-white rounded-xl p-4 w-4/5">
                                <ColorPicker style={{ width: '70%' }} value={bgColor} onCompleteJS={onSelectColor}>
                                    <Preview />
                                    <Panel1 />
                                    <HueSlider />
                                    <OpacitySlider />
                                    <Swatches />
                                </ColorPicker>

                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        </View>
    );
}