import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, RangeControl, TextControl, SelectControl } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { useEffect } from '@wordpress/element';

export default function Edit({ attributes, setAttributes, clientId }) {
    const {
        blockId, anchor,
        itemsPerPage, showSidebar, bookPageUrl,
        showSearch, showFilterGenre, showFilterAuthor, showFilterSeries,
        showFilterFormat, showFilterLanguage, showFilterPublisher, showFilterISBN,
        showFilterPrice, showFilterYear, showFilterAge, showFilterRating,
        showSorting, columns, paginationType
    } = attributes;

    useEffect(() => {
        if (!blockId) {
            setAttributes({ blockId: `awt-book-gallery-${clientId}` });
        }
    }, [blockId, clientId]);

    return (
        <div {...useBlockProps({
            id: anchor ? undefined : blockId
        })}>
            <InspectorControls>
                <PanelBody title={__('Main Settings', 'author-website-templates')} initialOpen={true}>
                    <ToggleControl
                        label={__('Show Sidebar', 'author-website-templates')}
                        checked={showSidebar}
                        onChange={(value) => setAttributes({ showSidebar: value })}
                    />
                    <TextControl
                        label={__('Main Book Page URL', 'author-website-templates')}
                        help={__('Enter the URL of your main book gallery page. Used for the "Back to All Books" link in sidebar filters.', 'author-website-templates')}
                        value={bookPageUrl}
                        onChange={(value) => setAttributes({ bookPageUrl: value })}
                    />
                    <RangeControl
                        label={__('Books Per Page', 'author-website-templates')}
                        value={itemsPerPage}
                        onChange={(value) => setAttributes({ itemsPerPage: value })}
                        min={3}
                        max={24}
                    />
                </PanelBody>

                <PanelBody title={__('Layout Settings', 'author-website-templates')} initialOpen={true}>
                    <ToggleControl
                        label={__('Show Sorting Options', 'author-website-templates')}
                        checked={showSorting}
                        onChange={(value) => setAttributes({ showSorting: value })}
                    />
                    <RangeControl
                        label={__('Books Per Row (Desktop)', 'author-website-templates')}
                        value={columns}
                        onChange={(value) => setAttributes({ columns: value })}
                        min={2}
                        max={4}
                    />
                    <SelectControl
                        label={__('Pagination Style', 'author-website-templates')}
                        value={paginationType}
                        options={[
                            { label: 'Numeric Pagination', value: 'numbers' },
                            { label: 'Load More Button', value: 'load_more' },
                        ]}
                        onChange={(value) => setAttributes({ paginationType: value })}
                    />
                </PanelBody>

                {showSidebar && (
                    <PanelBody title={__('Filter Visibility', 'author-website-templates')} initialOpen={false}>
                        <ToggleControl
                            label={__('Search', 'author-website-templates')}
                            checked={showSearch}
                            onChange={(value) => setAttributes({ showSearch: value })}
                        />
                        <ToggleControl
                            label={__('Genre (Taxonomy)', 'author-website-templates')}
                            checked={showFilterGenre}
                            onChange={(value) => setAttributes({ showFilterGenre: value })}
                        />
                        <ToggleControl
                            label={__('Author (Taxonomy)', 'author-website-templates')}
                            checked={showFilterAuthor}
                            onChange={(value) => setAttributes({ showFilterAuthor: value })}
                        />
                        <ToggleControl
                            label={__('Series (Taxonomy)', 'author-website-templates')}
                            checked={showFilterSeries}
                            onChange={(value) => setAttributes({ showFilterSeries: value })}
                        />
                        <ToggleControl
                            label={__('Format (Meta)', 'author-website-templates')}
                            checked={showFilterFormat}
                            onChange={(value) => setAttributes({ showFilterFormat: value })}
                        />
                        <ToggleControl
                            label={__('Language (Meta)', 'author-website-templates')}
                            checked={showFilterLanguage}
                            onChange={(value) => setAttributes({ showFilterLanguage: value })}
                        />
                        <ToggleControl
                            label={__('Publisher (Meta)', 'author-website-templates')}
                            checked={showFilterPublisher}
                            onChange={(value) => setAttributes({ showFilterPublisher: value })}
                        />
                        <ToggleControl
                            label={__('ISBN (Meta)', 'author-website-templates')}
                            checked={showFilterISBN}
                            onChange={(value) => setAttributes({ showFilterISBN: value })}
                        />
                        <ToggleControl
                            label={__('Price (Meta)', 'author-website-templates')}
                            checked={showFilterPrice}
                            onChange={(value) => setAttributes({ showFilterPrice: value })}
                        />
                        <ToggleControl
                            label={__('Year (Meta)', 'author-website-templates')}
                            checked={showFilterYear}
                            onChange={(value) => setAttributes({ showFilterYear: value })}
                        />
                        <ToggleControl
                            label={__('Reading Age (Meta)', 'author-website-templates')}
                            checked={showFilterAge}
                            onChange={(value) => setAttributes({ showFilterAge: value })}
                        />
                        <ToggleControl
                            label={__('Rating (Meta)', 'author-website-templates')}
                            checked={showFilterRating}
                            onChange={(value) => setAttributes({ showFilterRating: value })}
                        />
                    </PanelBody>
                )}
            </InspectorControls>

            <div className="awt-editor-placeholder">
                <ServerSideRender
                    block="awt/author-pro-book-gallery"
                    attributes={attributes}
                />
            </div>
        </div>
    );
}
