import { PanelBody , ColorPalette } from "@wordpress/components";
import { useSelect } from '@wordpress/data';
import { useState , useEffect } from '@wordpress/element';
import './global-color-palette.css';
const GlobalColorPalette = ({attributes, setAttributes}) => {

    const { globalColorPalette } = attributes;
    // const { CONST_BLOCK_OPHIC_OPTION_NAME, CONST_BLOCK_OPHIC_OPTION_VALUE } = useOrphicBlockConstants();

    const OrphicWPColorsTheme  = window.OrphicWPColorsTheme ?? [];
    const [color, setColors] = useState([]);

    // get the color from the global color palette > theme.json
    // const colors = useSelect('core/block-editor').getSettings().colors;

    //find css colors from the css file
    // console.log('OrphicWPColorsTheme : ', OrphicWPColorsTheme);

    const handleGlobalColorPalette = (value) => {
      setAttributes({ globalColorPalette: value });
    }

	return (
		<PanelBody title={"Global Color Palette"}>
      <span className="orphic-global-color-palette-title">Choose the color palette :</span>
      <div className="orphic-global-color-palette-buttons">
        <button className={`orphic-global-color-palette-button ${globalColorPalette === 'theme' ? 'active' : ''}`} onClick={() => handleGlobalColorPalette('theme')}>Theme</button>
        <button className={`orphic-global-color-palette-button ${globalColorPalette === 'custom' ? 'active' : ''}`} onClick={() => handleGlobalColorPalette('custom')}>Custom</button>
      </div>
      {globalColorPalette === 'custom' ? (
        <div className="orphic-global-color-palette-colors">
          {OrphicWPColorsTheme.map((color_theme, index) => (
            <ColorPalette key={index} colors={OrphicWPColorsTheme} onChange={(value) => {}} />
          ))}
        </div>
      ) : (
        ""
      )}
    </PanelBody>
	);
};
export default GlobalColorPalette;
