import { StyleSheet } from "react-native";
import ColorPicker, { BrightnessSlider, HueSlider, Preview, SaturationSlider, } from "reanimated-color-picker";

export type CustomColorPickerProperties = {
    color: string,
    handleColorChange: (color: string) => void | undefined,
}

const CustomColorPicker = (properties: CustomColorPickerProperties) => {
    return (
        <ColorPicker
        value={properties.color}
        onChange={(color) => {
            properties.handleColorChange(color["hex"])
        }}
        style={styles.colorPickerStyle}
        sliderThickness={30}
        thumbSize={40}
        thumbShape= "circle">
            <Preview
                style={[styles.previewStyle]}
                textStyle={{ fontSize: 18 }}
                colorFormat="hex"
                hideInitialColor/>

            <HueSlider style={[styles.sliderStyle]}/>
            <BrightnessSlider style={[styles.sliderStyle]}/>
            <SaturationSlider style={[styles.sliderStyle]}/>
      </ColorPicker>
    );
}

export default CustomColorPicker;

const styles = StyleSheet.create({
    colorPickerStyle: {
        justifyContent: 'center',
    },
    sliderStyle: {
        margin: 10,
    },
    previewStyle: {
        margin: 10,
        height: 50,
        borderRadius: 10,
    }
  });