/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { SelectControl, ToggleControl, PanelBody } from '@wordpress/components';

/**
 * Styles
 */
import './editor.scss';

/**
 * Edit function for Directory List Block
 */
export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();

    // Access the localized list types from the global window object
    const listTypeOptions = window.jvbListTypes ? window.jvbListTypes.map(type => {
        return {
            label: type.title,
            value: type.slug
        };
    }) : [];

    // Find the selected list type details
    const selectedType = window.jvbListTypes ?
        window.jvbListTypes.find(type => type.slug === attributes.listType) || {}
        : {};

    return (
        <div {...blockProps}>
            <InspectorControls>
                <PanelBody title={__('List Settings', 'jvb')}>
                    <SelectControl
                        label={__('List Type', 'jvb')}
                        value={attributes.listType}
                        options={listTypeOptions}
                        onChange={(value) => setAttributes({ listType: value })}
                    />
                    <ToggleControl
                        label={__('Refresh Cache', 'jvb')}
                        help={__('Enable to regenerate the list data on page load', 'jvb')}
                        checked={attributes.refreshCache}
                        onChange={(value) => setAttributes({ refreshCache: value })}
                    />
                </PanelBody>
            </InspectorControls>

            <div className="jvb-list-preview">
                <h3>{__('Directory List', 'jvb')}</h3>
                <div className="jvb-list-preview-info">
                    <p><strong>{__('Selected List Type:', 'jvb')}</strong> {selectedType.title}</p>
                    <p><strong>{__('Type:', 'jvb')}</strong> {selectedType.type}</p>
                    {selectedType.links && (
                        <p><strong>{__('Links:', 'jvb')}</strong> {selectedType.links.join(', ')}</p>
                    )}
                    <p><strong>{__('Cache Status:', 'jvb')}</strong>
                        {attributes.refreshCache ?
                            __('Will refresh on load', 'jvb') :
                            __('Using cached data', 'jvb')}
                    </p>
                </div>
                <p className="jvb-list-preview-note">
                    {__('This alphabetical list will be rendered on the frontend.', 'jvb')}
                </p>
            </div>
        </div>
    );
}