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

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

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Query">
                    <RangeControl
                        label="Products Per Page"
                        value={ attributes.products_per_page }
                        onChange={ ( val ) => setAttributes( { products_per_page: val } ) }
                        min={ 1 }
                        max={ 100 }
                    />
                    <SelectControl
                        label="Order By"
                        value={ attributes.orderby }
                        options={ [
                            { label: 'Date Created', value: 'created_at' },
                            { label: 'Date Modified', value: 'updated_at' },
                            { label: 'Name', value: 'name' },
                            { label: 'Price', value: 'price' },
                            { label: 'Stock', value: 'stock' },
                            { label: 'Featured First', value: 'featured' },
                        ] }
                        onChange={ ( val ) => setAttributes( { orderby: val } ) }
                    />
                    <SelectControl
                        label="Order"
                        value={ attributes.order }
                        options={ [
                            { label: 'Ascending', value: 'ASC' },
                            { label: 'Descending', value: 'DESC' },
                        ] }
                        onChange={ ( val ) => setAttributes( { order: val } ) }
                    />
                    <ToggleControl
                        label="Filter by Current Taxonomy"
                        help="On archive pages, filter to show only products in the current category/tag"
                        checked={ attributes.filter_by_current_taxonomy === 'yes' }
                        onChange={ ( val ) => setAttributes( { filter_by_current_taxonomy: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Featured Products Only"
                        checked={ attributes.show_featured_only === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_featured_only: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Pagination"
                        checked={ attributes.show_pagination === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_pagination: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Enable Sorting"
                        help="Show a dropdown to allow users to sort products"
                        checked={ attributes.enable_sorting === 'yes' }
                        onChange={ ( val ) => setAttributes( { enable_sorting: val ? 'yes' : 'no' } ) }
                    />
                </PanelBody>
                <PanelBody title="Grid Layout" initialOpen={ false }>
                    <SelectControl
                        label="Grid Style"
                        value={ attributes.grid_style }
                        options={ [
                            { label: 'Standard Grid', value: 'standard' },
                            { label: 'Masonry Grid', value: 'masonry' },
                            { label: 'Justified Grid', value: 'justified' },
                        ] }
                        onChange={ ( val ) => setAttributes( { grid_style: val } ) }
                    />
                    <SelectControl
                        label="Columns"
                        value={ attributes.columns }
                        options={ [
                            { label: '1 Column', value: '1' },
                            { label: '2 Columns', value: '2' },
                            { label: '3 Columns', value: '3' },
                            { label: '4 Columns', value: '4' },
                            { label: '5 Columns', value: '5' },
                            { label: '6 Columns', value: '6' },
                        ] }
                        onChange={ ( val ) => setAttributes( { columns: val } ) }
                    />
                    <RangeControl
                        label="Column Gap (px)"
                        value={ attributes.column_gap }
                        onChange={ ( val ) => setAttributes( { column_gap: val } ) }
                        min={ 0 }
                        max={ 100 }
                    />
                    <RangeControl
                        label="Row Gap (px)"
                        value={ attributes.row_gap }
                        onChange={ ( val ) => setAttributes( { row_gap: val } ) }
                        min={ 0 }
                        max={ 100 }
                    />
                    { attributes.columns === '1' && (
                        <SelectControl
                            label="Layout Style"
                            value={ attributes.layout_style }
                            options={ [
                                { label: 'Horizontal (Image + Content)', value: 'horizontal' },
                                { label: 'Vertical (Stacked)', value: 'vertical' },
                                { label: 'Compact (Minimal)', value: 'compact' },
                            ] }
                            onChange={ ( val ) => setAttributes( { layout_style: val } ) }
                        />
                    ) }
                </PanelBody>
                <PanelBody title="Show/Hide Components" initialOpen={ false }>
                    <ToggleControl
                        label="Show Image"
                        checked={ attributes.show_image === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_image: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Badges"
                        checked={ attributes.show_badge === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_badge: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Quick View"
                        checked={ attributes.show_quick_view === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_quick_view: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Categories"
                        checked={ attributes.show_categories === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_categories: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_categories === 'yes' && (
                        <ToggleControl
                            label="Link Categories"
                            help="Link category names to their archive pages"
                            checked={ attributes.link_categories === 'yes' }
                            onChange={ ( val ) => setAttributes( { link_categories: val ? 'yes' : 'no' } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Title"
                        checked={ attributes.show_title === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_title: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Rating"
                        checked={ attributes.show_rating === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_rating: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Price"
                        checked={ attributes.show_price === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_price: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Description"
                        checked={ attributes.show_description === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_description: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Stock Status"
                        checked={ attributes.show_stock === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_stock: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Add to Cart"
                        checked={ attributes.show_add_to_cart === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_add_to_cart: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Wishlist"
                        checked={ attributes.show_wishlist === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_wishlist: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Compare"
                        checked={ attributes.show_compare === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_compare: val ? 'yes' : 'no' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
