import React, { useState, useEffect } from 'react';
import { Popover, ColorPicker } from '@wordpress/components';

// AG-Grid Cell Renderer Component
const LCPGridColorRender = (props) => {
    const [color, setColor] = useState(props.value || ''); // Get the color value from the cell data
    const [isPopoverVisible, setPopoverVisible] = useState(false); // To toggle the visibility of the Popover

    useEffect(() => {
        // Update color if the value from AG-Grid changes
        if (props.value !== color) {
            setColor(props.value);
        }
    }, [props.value]); // Dependency on props.value so it updates when the cell value changes

    // Handle the color change from the color picker
    const handleColorChange = (newColor) => {
        setColor(newColor);
        // Optionally, update the cell value in AG-Grid here
        if (props.setValue) {
            props.setValue(newColor);
        }
    };

    return (
        <div>
            {/* Color square */}
            <div
                onClick={() => setPopoverVisible(!isPopoverVisible)} // Toggle popover visibility on click
                style={{
                    width: '30px',
                    height: '30px',
                    backgroundColor: color,
                    border: '1px solid #000',
                    margin: '0 auto',
                    cursor: 'pointer',
                }}
            />
            
            {/* Popover for color picker */}
            {isPopoverVisible && (
                <Popover
                    position="bottom center"
                    onClose={() => setPopoverVisible(false)} // Close popover when clicking outside
                >
                    <ColorPicker
                        color={color}
                        onChangeComplete={(value) => handleColorChange(value.hex)} // Update color on change
                    />
                </Popover>
            )}
        </div>
    );
};

export default LCPGridColorRender;