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

import metadata from '../../../blocks/tags/product-table/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="Featured Products Only"
                        checked={ attributes.featured_only === 'yes' }
                        onChange={ ( val ) => setAttributes( { featured_only: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Filter by Current Taxonomy"
                        help="Enable on archive pages to auto-filter by current category/tag"
                        checked={ attributes.filter_by_current_taxonomy === 'yes' }
                        onChange={ ( val ) => setAttributes( { filter_by_current_taxonomy: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Pagination"
                        checked={ attributes.show_pagination === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_pagination: val ? 'yes' : 'no' } ) }
                    />
                </PanelBody>
                <PanelBody title="Table Columns" initialOpen={ false }>
                    <ToggleControl
                        label="Image Column"
                        checked={ attributes.show_image_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_image_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Badges Column"
                        checked={ attributes.show_badges_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_badges_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Name Column"
                        checked={ attributes.show_name_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_name_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Rating Column"
                        checked={ attributes.show_rating_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_rating_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="SKU Column"
                        checked={ attributes.show_sku_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_sku_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Price Column"
                        checked={ attributes.show_price_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_price_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Stock Column"
                        checked={ attributes.show_stock_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_stock_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Description Column"
                        checked={ attributes.show_description_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_description_column: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Actions Column"
                        checked={ attributes.show_actions_column === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_actions_column: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_actions_column === 'yes' && (
                        <>
                            <TextControl
                                label="Add to Cart Button Text"
                                value={ attributes.add_to_cart_text }
                                onChange={ ( val ) => setAttributes( { add_to_cart_text: val } ) }
                            />
                            <TextControl
                                label="Variable Product Button Text"
                                value={ attributes.variable_product_text }
                                onChange={ ( val ) => setAttributes( { variable_product_text: val } ) }
                            />
                            <SelectControl
                                label="Variable Product Behavior"
                                value={ attributes.variable_product_behavior }
                                options={ [
                                    { label: 'Link to Product Page', value: 'link_to_product' },
                                    { label: 'Disabled (wait for selection)', value: 'disabled' },
                                ] }
                                onChange={ ( val ) => setAttributes( { variable_product_behavior: val } ) }
                            />
                        </>
                    ) }
                </PanelBody>
                <PanelBody title="HTML Tags" initialOpen={ false }>
                    <SelectControl
                        label="Product Name Tag"
                        value={ attributes.name_html_tag }
                        options={ [
                            { label: 'H3', value: 'h3' },
                            { label: 'H4', value: 'h4' },
                            { label: 'H5', value: 'h5' },
                            { label: 'P', value: 'p' },
                            { label: 'Span', value: 'span' },
                        ] }
                        onChange={ ( val ) => setAttributes( { name_html_tag: val } ) }
                    />
                    <SelectControl
                        label="Price Tag"
                        value={ attributes.price_html_tag }
                        options={ [
                            { label: 'H3', value: 'h3' },
                            { label: 'H4', value: 'h4' },
                            { label: 'H5', value: 'h5' },
                            { label: 'P', value: 'p' },
                            { label: 'Span', value: 'span' },
                        ] }
                        onChange={ ( val ) => setAttributes( { price_html_tag: val } ) }
                    />
                    <SelectControl
                        label="Stock Status Tag"
                        value={ attributes.stock_html_tag }
                        options={ [
                            { label: 'P', value: 'p' },
                            { label: 'Span', value: 'span' },
                            { label: 'Div', value: 'div' },
                        ] }
                        onChange={ ( val ) => setAttributes( { stock_html_tag: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Column Header Labels" initialOpen={ false }>
                    <TextControl
                        label="Image Header"
                        value={ attributes.header_image_label }
                        onChange={ ( val ) => setAttributes( { header_image_label: val } ) }
                    />
                    <TextControl
                        label="Badges Header"
                        value={ attributes.header_badges_label }
                        onChange={ ( val ) => setAttributes( { header_badges_label: val } ) }
                    />
                    <TextControl
                        label="Name Header"
                        value={ attributes.header_name_label }
                        onChange={ ( val ) => setAttributes( { header_name_label: val } ) }
                    />
                    <TextControl
                        label="SKU Header"
                        value={ attributes.header_sku_label }
                        onChange={ ( val ) => setAttributes( { header_sku_label: val } ) }
                    />
                    <TextControl
                        label="Price Header"
                        value={ attributes.header_price_label }
                        onChange={ ( val ) => setAttributes( { header_price_label: val } ) }
                    />
                    <TextControl
                        label="Stock Header"
                        value={ attributes.header_stock_label }
                        onChange={ ( val ) => setAttributes( { header_stock_label: val } ) }
                    />
                    <TextControl
                        label="Rating Header"
                        value={ attributes.header_rating_label }
                        onChange={ ( val ) => setAttributes( { header_rating_label: val } ) }
                    />
                    <TextControl
                        label="Description Header"
                        value={ attributes.header_description_label }
                        onChange={ ( val ) => setAttributes( { header_description_label: val } ) }
                    />
                    <TextControl
                        label="Actions Header"
                        value={ attributes.header_actions_label }
                        onChange={ ( val ) => setAttributes( { header_actions_label: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Element Visibility" initialOpen={ false }>
                    <ToggleControl
                        label="Show Categories"
                        checked={ attributes.show_categories === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_categories: 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 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>
                <PanelBody title="Table Features" initialOpen={ false }>
                    <ToggleControl
                        label="Enable Sorting"
                        checked={ attributes.enable_sorting === 'yes' }
                        onChange={ ( val ) => setAttributes( { enable_sorting: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.enable_sorting === 'yes' && (
                        <>
                            <SelectControl
                                label="Sorting Type"
                                value={ attributes.sorting_type }
                                options={ [
                                    { label: 'Select Box Only', value: 'select' },
                                    { label: 'Column Headers Only', value: 'headers' },
                                    { label: 'Both', value: 'both' },
                                ] }
                                onChange={ ( val ) => setAttributes( { sorting_type: val } ) }
                            />
                            <ToggleControl
                                label="Show Sort Label"
                                checked={ attributes.sorting_show_label === 'yes' }
                                onChange={ ( val ) => setAttributes( { sorting_show_label: val ? 'yes' : 'no' } ) }
                            />
                            { attributes.sorting_show_label === 'yes' && (
                                <TextControl
                                    label="Sort Label Text"
                                    value={ attributes.sorting_label_text }
                                    onChange={ ( val ) => setAttributes( { sorting_label_text: val } ) }
                                />
                            ) }
                        </>
                    ) }
                    <TextControl
                        label="No Products Message"
                        value={ attributes.no_products_message }
                        onChange={ ( val ) => setAttributes( { no_products_message: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
