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

import metadata from '../../../blocks/premium/recently-viewed/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <TextControl
                        label="Section Title"
                        value={ attributes.title }
                        onChange={ ( val ) => setAttributes( { title: val } ) }
                    />
                    <ToggleControl
                        label="Show Title"
                        checked={ attributes.showTitle === 'yes' }
                        onChange={ ( val ) => setAttributes( { showTitle: val ? 'yes' : '' } ) }
                    />
                    <NumberControl
                        label="Max Products"
                        value={ attributes.maxProducts }
                        min={ 1 }
                        max={ 12 }
                        onChange={ ( val ) => setAttributes( { maxProducts: parseInt( val ) || 4 } ) }
                    />
                    <SelectControl
                        label="Columns"
                        value={ attributes.columns }
                        options={ [
                            { label: '1', value: '1' },
                            { label: '2', value: '2' },
                            { label: '3', value: '3' },
                            { label: '4', value: '4' },
                            { label: '5', value: '5' },
                            { label: '6', value: '6' },
                        ] }
                        onChange={ ( val ) => setAttributes( { columns: val } ) }
                    />
                    <ToggleControl
                        label="Show Image"
                        checked={ attributes.showImage === 'yes' }
                        onChange={ ( val ) => setAttributes( { showImage: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Price"
                        checked={ attributes.showPrice === 'yes' }
                        onChange={ ( val ) => setAttributes( { showPrice: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Exclude Current Product"
                        checked={ attributes.excludeCurrent === 'yes' }
                        onChange={ ( val ) => setAttributes( { excludeCurrent: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Add to Cart"
                        checked={ attributes.showAddToCart === 'yes' }
                        onChange={ ( val ) => setAttributes( { showAddToCart: val ? 'yes' : '' } ) }
                    />
                    { attributes.showAddToCart === 'yes' && (
                        <TextControl
                            label="Button Text"
                            value={ attributes.addToCartText }
                            onChange={ ( val ) => setAttributes( { addToCartText: val } ) }
                        />
                    ) }
                    <TextControl
                        label="Empty Message"
                        value={ attributes.emptyMessage }
                        onChange={ ( val ) => setAttributes( { emptyMessage: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
