import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { PanelBody, SelectControl, ToggleControl, TextControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';

import metadata from '../../../blocks/tags/product-filter/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Filter Options">
                    <ToggleControl
                        label="Show Title"
                        checked={ attributes.show_title === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_title: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_title === 'yes' && (
                        <TextControl
                            label="Filter Title"
                            value={ attributes.filter_title }
                            onChange={ ( val ) => setAttributes( { filter_title: val } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Search Box"
                        checked={ attributes.show_search === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_search: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Categories Filter"
                        checked={ attributes.show_categories === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_categories: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Tags Filter"
                        checked={ attributes.show_tags === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_tags: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Hide Empty Categories/Tags"
                        checked={ attributes.hide_empty === 'yes' }
                        onChange={ ( val ) => setAttributes( { hide_empty: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Price Range"
                        checked={ attributes.show_price_range === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_price_range: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_price_range === 'yes' && (
                        <>
                            <SelectControl
                                label="Price Range Display"
                                value={ attributes.price_range_display_type }
                                options={ [
                                    { label: 'Range Slider', value: 'slider' },
                                    { label: 'Min/Max Inputs', value: 'inputs' },
                                ] }
                                onChange={ ( val ) => setAttributes( { price_range_display_type: val } ) }
                            />
                            <NumberControl
                                label="Minimum Price"
                                value={ attributes.min_price }
                                onChange={ ( val ) => setAttributes( { min_price: parseInt( val ) || 0 } ) }
                                min={ 0 }
                            />
                            <NumberControl
                                label="Maximum Price"
                                value={ attributes.max_price }
                                onChange={ ( val ) => setAttributes( { max_price: parseInt( val ) || 1000 } ) }
                                min={ 1 }
                            />
                        </>
                    ) }
                    <ToggleControl
                        label="Show Stock Filter"
                        checked={ attributes.show_stock_filter === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_stock_filter: val ? 'yes' : 'no' } ) }
                    />
                </PanelBody>
                <PanelBody title="Attribute Filters" initialOpen={ false }>
                    <ToggleControl
                        label="Show Attribute Filters"
                        checked={ attributes.show_attribute_filters === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_attribute_filters: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_attribute_filters === 'yes' && (
                        <>
                            <SelectControl
                                label="Attribute Display"
                                value={ attributes.attribute_filter_type }
                                options={ [
                                    { label: 'Checkboxes', value: 'checkbox' },
                                    { label: 'Dropdown', value: 'dropdown' },
                                ] }
                                onChange={ ( val ) => setAttributes( { attribute_filter_type: val } ) }
                            />
                            <SelectControl
                                label="Number Attribute Display"
                                value={ attributes.number_attribute_type }
                                options={ [
                                    { label: 'Range Slider', value: 'slider' },
                                    { label: 'Min/Max Inputs', value: 'inputs' },
                                ] }
                                onChange={ ( val ) => setAttributes( { number_attribute_type: val } ) }
                            />
                            <ToggleControl
                                label="Show Units"
                                help="Display unit suffix (kg, cm, etc.) next to values"
                                checked={ attributes.show_attribute_units === 'yes' }
                                onChange={ ( val ) => setAttributes( { show_attribute_units: val ? 'yes' : 'no' } ) }
                            />
                            <ToggleControl
                                label="Show Product Counts"
                                checked={ attributes.show_attribute_counts === 'yes' }
                                onChange={ ( val ) => setAttributes( { show_attribute_counts: val ? 'yes' : 'no' } ) }
                            />
                            <SelectControl
                                label="Label Display"
                                value={ attributes.attribute_label_display }
                                options={ [
                                    { label: 'Name Only', value: 'name' },
                                    { label: 'Name + Icon', value: 'name_icon' },
                                    { label: 'Icon Only', value: 'icon' },
                                ] }
                                onChange={ ( val ) => setAttributes( { attribute_label_display: val } ) }
                            />
                        </>
                    ) }
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
