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

import metadata from '../../../blocks/premium/custom-attributes/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <ProductSearchControl
                        value={ attributes.productId }
                        onChange={ ( val ) => setAttributes( { productId: val } ) }
                    />
                    <TextControl
                        label="Title"
                        value={ attributes.title }
                        onChange={ ( val ) => setAttributes( { title: val } ) }
                    />
                    <SelectControl
                        label="Layout"
                        value={ attributes.layout }
                        options={ [
                            { label: 'Table', value: 'table' },
                            { label: 'List', value: 'list' },
                            { label: 'Grid', value: 'grid' },
                            { label: 'Inline', value: 'inline' },
                        ] }
                        onChange={ ( val ) => setAttributes( { layout: val } ) }
                    />
                    { attributes.layout === 'grid' && (
                        <SelectControl
                            label="Columns"
                            value={ attributes.columns }
                            options={ [
                                { label: '1', value: '1' },
                                { label: '2', value: '2' },
                                { label: '3', value: '3' },
                                { label: '4', value: '4' },
                            ] }
                            onChange={ ( val ) => setAttributes( { columns: val } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Units"
                        checked={ attributes.show_units === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_units: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Empty Attributes"
                        checked={ attributes.show_empty === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_empty: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Icons"
                        checked={ attributes.show_icons === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_icons: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Group by Attribute Group"
                        checked={ attributes.group_by_group === 'yes' }
                        onChange={ ( val ) => setAttributes( { group_by_group: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Hide if No Attributes"
                        checked={ attributes.hide_if_empty === 'yes' }
                        onChange={ ( val ) => setAttributes( { hide_if_empty: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
