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

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

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <SelectControl
                        label="Product Source"
                        value={ attributes.productSource }
                        options={ [
                            { label: 'Current Product (Auto-detect)', value: 'current' },
                            { label: 'Select Product', value: 'custom' },
                        ] }
                        onChange={ ( val ) => setAttributes( { productSource: val } ) }
                    />
                    { attributes.productSource === 'custom' && (
                        <ProductSearchControl
                            value={ attributes.productId }
                            onChange={ ( val ) => setAttributes( { productId: val } ) }
                        />
                    ) }
                    <SelectControl
                        label="Display Layout"
                        value={ attributes.displayLayout }
                        options={ [
                            { label: 'Inline (Horizontal)', value: 'inline' },
                            { label: 'List (Vertical)', value: 'list' },
                            { label: 'Badges/Pills', value: 'badges' },
                        ] }
                        onChange={ ( val ) => setAttributes( { displayLayout: val } ) }
                    />
                    <ToggleControl
                        label="Show Label"
                        checked={ attributes.showLabel === 'yes' }
                        onChange={ ( val ) => setAttributes( { showLabel: val ? 'yes' : '' } ) }
                    />
                    { attributes.showLabel === 'yes' && (
                        <TextControl
                            label="Label Text"
                            value={ attributes.labelText }
                            onChange={ ( val ) => setAttributes( { labelText: val } ) }
                        />
                    ) }
                    { attributes.displayLayout === 'inline' && (
                        <TextControl
                            label="Separator"
                            value={ attributes.separator }
                            onChange={ ( val ) => setAttributes( { separator: val } ) }
                        />
                    ) }
                    { attributes.displayLayout !== 'inline' && (
                        <ToggleControl
                            label="Show Category Image"
                            checked={ attributes.showImage === 'yes' }
                            onChange={ ( val ) => setAttributes( { showImage: val ? 'yes' : '' } ) }
                        />
                    ) }
                    <SelectControl
                        label="Alignment"
                        value={ attributes.alignment }
                        options={ [
                            { label: 'Default', value: '' },
                            { label: 'Left', value: 'left' },
                            { label: 'Center', value: 'center' },
                            { label: 'Right', value: 'right' },
                        ] }
                        onChange={ ( val ) => setAttributes( { alignment: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
