import { useEffect, useState } from 'react'
import { CustomPicker } from 'react-color'
import {EditableInput, Hue, Saturation} from 'react-color/lib/components/common'
import './color-palette.less'
import { HexStringToRGB, HSLToRGB, HSVToRGB, RGBToHexString, RGBToHSL, RGBToHSV } from '../../utils/color-palette'
import { Button, Space, Tooltip } from 'antd'
import React from 'react'

function HuePointer() {
    return (
        <div className="hue-pointer"></div>
    )
}

interface IProps {
    onComplete?: (color:string) => void;
    onCancel?: () => void;
    defaultColor?: string;
}

export function ColorPalette(props: IProps){
    const [currentColor, setCurrentColor] = useState<string>('#2c1698');
    const [hex, setHex] = useState<string>('#2c1698');
    const [hsl, setHsl] = useState<{h:number, s:number, l:number, a:number}>({h: 250.18867924528305, s: 0.7444395987788921, l: 0.34108375, a: 1});
    const [hsv, setHsv] = useState<{h:number, s:number, v:number, a:number}>({h: 250.18867924528305, s: 0.8534999999999999, v: 0.595, a: 1});
    const [rgb, setRgb] = useState<{r:number, g:number, b:number, a:number}>({r: 44, g: 22, b: 152, a: 1});
    // const [oldHue, setOldHue] = useState<number>(250.18867924528305);

    const styles = {
        label: {
            display: 'block',
            textAlign: 'center',
            fontSize: '11px',
            color: '#222222',
            paddingTop: '3px',
            paddingBottom: '4px',
            textTransform: 'capitalize',
        },
        input: {
            border: 'none',
            fontSize: '11px',
            padding: '4px 10% 3px',
            boxShadow: 'rgb(204 204 204) 0px 0px 0px 1px inset',
            width: '100%',
        },
        wrap: {
        }
    }

    useEffect(() => {
        let hex = props.defaultColor || '#2C1698';
        let rgb = HexStringToRGB(hex);
        let hsl = RGBToHSL(rgb);
        let hsv = RGBToHSV(rgb);
        setHex(hex);
        setHsl(hsl);
        setHsv(hsv);
        setRgb(rgb);
        setCurrentColor(hex);
    }, [])

    const handleHueChange = (color) => {
        let tmp_hsl = color;
        let tmp_rgb = HSLToRGB(color);
        let tmp_hex = RGBToHexString(tmp_rgb)
        let tmp_hsv = RGBToHSV(tmp_rgb);
        setHex(tmp_hex);
        setHsl(tmp_hsl);
        setHsv(tmp_hsv);
        setRgb(tmp_rgb);
        setCurrentColor(tmp_hex);
        // setOldHue(tmp_hsl.h);
    }

    const handleSaturationChange = (color) => {
        let tmp_hsv = color;
        let tmp_rgb = HSVToRGB(tmp_hsv);
        let tmp_hex = RGBToHexString(tmp_rgb)
        let tmp_hsl = RGBToHSL(tmp_rgb);
        if ((Math.floor(tmp_hsv.h) !== tmp_hsl.h) && tmp_hsl.h === 0) {
            tmp_hsl.h = tmp_hsv.h
        }
        setHex(tmp_hex);
        setHsl(tmp_hsl);
        setHsv(tmp_hsv);
        setRgb(tmp_rgb);
        setCurrentColor(tmp_hex);
        // setOldHue(tmp_hsl.h);

    }

    const handleHexChange = (e) => {
        let tmp_hex = e.hex || e;
        if (tmp_hex.length !== 4 && tmp_hex.length !== 7) return;
        let tmp_rgb = HexStringToRGB(tmp_hex);
        let tmp_hsl = RGBToHSL(tmp_rgb);
        let tmp_hsv = RGBToHSV(tmp_rgb);
        setHex(tmp_hex);
        setHsl(tmp_hsl);
        setHsv(tmp_hsv);
        setRgb(tmp_rgb);
        setCurrentColor(tmp_hex);
        // setOldHue(tmp_hsl.h);
    }

    const handleRGBChange = (color) => {
        let tmp_rgb = {...rgb, ...color};
        let tmp_hsl = RGBToHSL(tmp_rgb);
        let tmp_hsv = RGBToHSV(tmp_rgb);
        let tmp_hex = RGBToHexString(tmp_rgb);
        setHex(tmp_hex);
        setHsl(tmp_hsl);
        setHsv(tmp_hsv);
        setRgb(tmp_rgb);
        setCurrentColor(tmp_hex);
        // setOldHue(tmp_hsl.h);
    }

    return (
        <div className="tn-color-palette-container">
            <div className="left-panel">
                <div className="palette-saturation">
                    <Saturation {...props} hsl={hsl} hsv={hsv} onChange={handleSaturationChange}/>
                </div>
                <div className="palette-hue">
                    <Hue {...props} hsl={hsl} onChange={handleHueChange} pointer={HuePointer}/>
                </div>

            </div>
            <div className="right-panel">
                <div className="color-wrapper">
                    {defaultColors.map((color, idx) => (
                        <Tooltip title={color} key={idx} color="#fff" overlayClassName="color-tooltip">
                            <div className="color-item" onClick={() => handleHexChange(color)}>
                                <div className="color-box" style={{backgroundColor: color}}></div>
                            </div>
                        </Tooltip>
                    ))}
                </div>
                <div className="input-wrapper">
                    <div className="input-item-hex">
                        <EditableInput 
                        label="hex" 
                        value={hex }
                        onChange={handleHexChange}
                        //@ts-ignore
                        style={styles}/>
                    </div>
                    <div className="fill-remaining-space"></div>
                    <div className="input-item-rgb">
                        <EditableInput 
                        label="r" 
                        value={rgb?.r }
                        onChange={handleRGBChange}
                        //@ts-ignore
                        style={styles}/>
                    </div>
                    <div className="input-item-rgb">
                        <EditableInput 
                        label="g" 
                        value={rgb?.g }
                        onChange={handleRGBChange}
                        //@ts-ignore
                        style={styles}/>
                    </div>
                    <div className="input-item-rgb">
                        <EditableInput 
                        label="b" 
                        value={rgb?.b }
                        onChange={handleRGBChange}
                        //@ts-ignore
                        style={styles}/>
                    </div>
                </div>
                <span className="fill-remaining-space"></span>
                <div className="color-footer">
                    <div className="current-color" style={{backgroundColor: currentColor}}></div>
                    <span className="fill-remaining-space"></span>
                    <Space>
                        <Button size="small" type="primary" onClick={() => {
                            if (props.onComplete) {
                                props.onComplete(currentColor)
                            }
                        }}
                        >确定</Button>
                        <Button size="small" onClick={() => {
                            if (props.onCancel) {
                                props.onCancel();
                            }
                        }}>取消</Button>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default CustomPicker(ColorPalette);

const defaultColors = [
    '#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', 
    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', 
    '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E'
];