import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import IconSelectControl from './IconSelectControl'; // Import the new component
import './editor.scss';

export default function Edit(props) {
    const { attributes, setAttributes } = props;
    const { type, popUpId, buttonText, iconSvgId, iconSvgPath } = attributes; // iconSvgId holds the UUID and iconSvgPath holds the SVG path
    const [popups, setPopups] = useState([]);
    const [icons, setIcons] = useState([]); // To hold the icon data

    // Fetch published popups (lcp-popup CPT)
    useEffect(() => {
        const fetchPopups = async () => {
            const response = await fetch('/wp-json/wp/v2/lcp-popup');
            const data = await response.json();
            setPopups(data);
        };
        fetchPopups();
    }, []);

    // Fetch icon data from the JSON source (local or remote)
    useEffect(() => {
        const fetchIcons = async () => {
            // Assuming the icon data is in a file called 'icons.json'
            const response = await fetch('/path/to/icons.json');
            const iconData = await response.json();
            setIcons(iconData); // Set the fetched icon data
        };
        fetchIcons();
    }, []); 

    // Handle icon selection from dropdown
    const handleIconChange = (selectedIconId) => {
        const selectedIcon = icons.find(icon => icon.uuid === selectedIconId);

        if (selectedIcon) {
            setAttributes({
                iconSvgId: selectedIconId,
                iconSvgPath: selectedIcon.path
            });
        }
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={__("Popup Settings")}>
                    <SelectControl
                        label={__("Popup")}
                        value={popUpId}
                        options={popups.map((popup) => ({
                            label: popup.title.rendered,
                            value: popup.id,
                        }))}
                        onChange={(value) => setAttributes({ popUpId: value })}
                    />
                    <TextControl
                        label={__("Button Text")}
                        value={buttonText}
                        onChange={(value) => setAttributes({ buttonText: value })}
                    />
                    {/* Pass the icons array to the IconSelectControl component */}
                    <IconSelectControl
                        label={__("Icon")}
                        value={iconSvgId}
                        onChange={handleIconChange}
                        icons={icons} // Passing the icons data here
                    />
                </PanelBody>
            </InspectorControls>
            <div {...useBlockProps()}>
                <div className="button-container">
                    <span>{buttonText}</span>
                </div>
            </div>
        </>
    );
}