const { useState, useEffect } = wp.element;

const SimpleColorPicker = ( {
    color,
    onColorChange,
    ...props
} ) => {

    const colors = [
        { value: "red", hex: "#e74c3c" },
        { value: "orange", hex: "#e67e22" },
        { value: "yellow", hex: "#f1c40f" },
        { value: "green", hex: "#27ae60" },
        { value: "turquoise", hex: "#1abc9c" },
        { value: "blue", hex: "#2980b9" },
        { value: "violet", hex: "#8e44ad" },
        { value: "pink", hex: "#fd79a8" },
        { value: "brown", hex: "#8e6e53" },
        { value: "black", hex: "#000000" },
        { value: "gray", hex: "#7f8c8d" },
        { value: "white", hex: "#ffffff" },
    ];

    const handleSelect = ( selectedValue ) => {
        if ( selectedValue === color ) {
            onColorChange( null );
        } else {
            onColorChange( selectedValue );
        }
    };

    return (
        <div className="scp-container" {...props}>
            <div className="scp-color-grid">
                {colors.map( ( c ) => (
                    <button
                        key={c.value}
                        type="button"
                        title={c.value}
                        className={`scp-color-btn ${color === c.value ? 'scp-selected' : ''}`}
                        style={{ backgroundColor: c.hex }}
                        onClick={() => handleSelect( c.value )}
                        aria-label={c.value}
                    />
                ) )}
            </div>

            {color && (
                <div>
                    <button
                        type="button"
                        className="safi-reset safi-btn--clear"
                        onClick={() => onColorChange( null )}
                    >
                        Clear
                    </button>
                </div>
            )}
        </div>
    );
};

export default SimpleColorPicker;
