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

import metadata from '../../../blocks/premium/variation-selector/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <ProductSearchControl
                        value={ attributes.productId }
                        onChange={ ( val ) => setAttributes( { productId: val } ) }
                    />
                    <ToggleControl
                        label="Show Attribute Labels"
                        checked={ attributes.showAttributeLabel === 'yes' }
                        onChange={ ( val ) => setAttributes( { showAttributeLabel: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Selected Value"
                        checked={ attributes.showSelectedValue === 'yes' }
                        onChange={ ( val ) => setAttributes( { showSelectedValue: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Hide Out of Stock"
                        checked={ attributes.hideOutOfStock === 'yes' }
                        onChange={ ( val ) => setAttributes( { hideOutOfStock: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Price Change"
                        checked={ attributes.showPriceChange === 'yes' }
                        onChange={ ( val ) => setAttributes( { showPriceChange: val ? 'yes' : '' } ) }
                    />
                    <TextControl
                        label="Clear Selection Text"
                        value={ attributes.clearSelectionText }
                        onChange={ ( val ) => setAttributes( { clearSelectionText: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Display Settings" initialOpen={ false }>
                    <SelectControl
                        label="Default Display Type"
                        value={ attributes.defaultDisplayType }
                        options={ [
                            { label: 'Auto (from attribute type)', value: 'auto' },
                            { label: 'Dropdown', value: 'select' },
                            { label: 'Buttons', value: 'buttons' },
                            { label: 'Swatches (color/image)', value: 'swatches' },
                        ] }
                        onChange={ ( val ) => setAttributes( { defaultDisplayType: val } ) }
                    />
                    <SelectControl
                        label="Button Layout"
                        value={ attributes.buttonLayout }
                        options={ [
                            { label: 'Inline', value: 'inline' },
                            { label: 'Grid', value: 'grid' },
                        ] }
                        onChange={ ( val ) => setAttributes( { buttonLayout: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
