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 metadata from '../../../blocks/tags/cart-display/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Cart Settings">
                    <ToggleControl
                        label="Show Empty Cart Message"
                        checked={ attributes.showEmptyMessage === 'yes' }
                        onChange={ ( val ) => setAttributes( { showEmptyMessage: val ? 'yes' : '' } ) }
                    />
                    { attributes.showEmptyMessage === 'yes' && (
                        <TextControl
                            label="Empty Cart Message"
                            value={ attributes.emptyMessage }
                            onChange={ ( val ) => setAttributes( { emptyMessage: val } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Continue Shopping Button"
                        checked={ attributes.showContinueShopping === 'yes' }
                        onChange={ ( val ) => setAttributes( { showContinueShopping: val ? 'yes' : '' } ) }
                    />
                    { attributes.showContinueShopping === 'yes' && (
                        <>
                            <TextControl
                                label="Continue Shopping Text"
                                value={ attributes.continueShoppingText }
                                onChange={ ( val ) => setAttributes( { continueShoppingText: val } ) }
                            />
                            <TextControl
                                label="Continue Shopping URL"
                                value={ attributes.continueShoppingUrl }
                                onChange={ ( val ) => setAttributes( { continueShoppingUrl: val } ) }
                            />
                        </>
                    ) }
                    <TextControl
                        label="Checkout URL"
                        value={ attributes.checkoutUrl }
                        onChange={ ( val ) => setAttributes( { checkoutUrl: val } ) }
                    />
                    <SelectControl
                        label="Quantity Controls Style"
                        value={ attributes.quantityControlsStyle }
                        options={ [
                            { label: 'Input Controls & Buttons', value: 'both' },
                            { label: 'Input Controls Only', value: 'input_only' },
                        ] }
                        onChange={ ( val ) => setAttributes( { quantityControlsStyle: val } ) }
                    />
                    <ToggleControl
                        label="Show Product Images"
                        checked={ attributes.showProductImages === 'yes' }
                        onChange={ ( val ) => setAttributes( { showProductImages: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Link Product Name"
                        checked={ attributes.linkProductName === 'yes' }
                        onChange={ ( val ) => setAttributes( { linkProductName: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Enable AJAX Updates"
                        checked={ attributes.enableAjaxUpdates === 'yes' }
                        onChange={ ( val ) => setAttributes( { enableAjaxUpdates: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
