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-attributes/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="Layout"
                        value={ attributes.layout }
                        options={ [
                            { label: 'Table', value: 'table' },
                            { label: 'Vertical List', value: 'list' },
                            { label: 'Inline', value: 'inline' },
                            { label: 'Grid (2 columns)', value: 'grid' },
                        ] }
                        onChange={ ( val ) => setAttributes( { layout: val } ) }
                    />
                    <ToggleControl
                        label="Show Weight"
                        checked={ attributes.showWeight === 'yes' }
                        onChange={ ( val ) => setAttributes( { showWeight: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Dimensions"
                        checked={ attributes.showDimensions === 'yes' }
                        onChange={ ( val ) => setAttributes( { showDimensions: val ? 'yes' : '' } ) }
                    />
                    { attributes.showDimensions === 'yes' && (
                        <SelectControl
                            label="Dimensions Format"
                            value={ attributes.dimensionsFormat }
                            options={ [
                                { label: 'Combined (L x W x H)', value: 'combined' },
                                { label: 'Separate rows/items', value: 'separate' },
                            ] }
                            onChange={ ( val ) => setAttributes( { dimensionsFormat: val } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Labels"
                        checked={ attributes.showLabels === 'yes' }
                        onChange={ ( val ) => setAttributes( { showLabels: val ? 'yes' : '' } ) }
                    />
                    { attributes.showLabels === 'yes' && (
                        <>
                            <TextControl
                                label="Weight Label"
                                value={ attributes.weightLabel }
                                onChange={ ( val ) => setAttributes( { weightLabel: val } ) }
                            />
                            { attributes.dimensionsFormat === 'combined' && (
                                <TextControl
                                    label="Dimensions Label"
                                    value={ attributes.dimensionsLabel }
                                    onChange={ ( val ) => setAttributes( { dimensionsLabel: val } ) }
                                />
                            ) }
                        </>
                    ) }
                    <ToggleControl
                        label="Show Units"
                        checked={ attributes.showUnits === 'yes' }
                        onChange={ ( val ) => setAttributes( { showUnits: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Hide if Empty"
                        checked={ attributes.hideEmpty === 'yes' }
                        onChange={ ( val ) => setAttributes( { hideEmpty: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Custom Attributes"
                        checked={ attributes.showCustomAttributes === 'yes' }
                        onChange={ ( val ) => setAttributes( { showCustomAttributes: val ? 'yes' : '' } ) }
                    />
                    { attributes.showCustomAttributes === 'yes' && (
                        <SelectControl
                            label="Custom Attributes Position"
                            value={ attributes.customAttributesPosition }
                            options={ [
                                { label: 'Before Weight/Dimensions', value: 'before' },
                                { label: 'After Weight/Dimensions', value: 'after' },
                            ] }
                            onChange={ ( val ) => setAttributes( { customAttributesPosition: val } ) }
                        />
                    ) }
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
