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/mini-cart/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Cart Settings">
                    <SelectControl
                        label="Cart Style"
                        value={ attributes.cartStyle }
                        options={ [
                            { label: 'Icon with Count', value: 'icon_count' },
                            { label: 'Icon with Total', value: 'icon_total' },
                            { label: 'Icon with Count & Total', value: 'icon_count_total' },
                            { label: 'Text Only', value: 'text_only' },
                        ] }
                        onChange={ ( val ) => setAttributes( { cartStyle: val } ) }
                    />
                    { attributes.cartStyle === 'text_only' && (
                        <TextControl
                            label="Cart Text"
                            value={ attributes.cartText }
                            onChange={ ( val ) => setAttributes( { cartText: val } ) }
                        />
                    ) }
                    <ToggleControl
                        label="Show Cart Dropdown"
                        checked={ attributes.showDropdown === 'yes' }
                        onChange={ ( val ) => setAttributes( { showDropdown: val ? 'yes' : '' } ) }
                    />
                    { attributes.showDropdown === 'yes' && (
                        <ToggleControl
                            label="Show Product Image"
                            checked={ attributes.showProductImage === 'yes' }
                            onChange={ ( val ) => setAttributes( { showProductImage: val ? 'yes' : '' } ) }
                        />
                    ) }
                    <TextControl
                        label="Empty Cart Text"
                        value={ attributes.emptyCartText }
                        onChange={ ( val ) => setAttributes( { emptyCartText: val } ) }
                    />
                    <TextControl
                        label="Cart Page URL"
                        value={ attributes.cartPageUrl }
                        onChange={ ( val ) => setAttributes( { cartPageUrl: val } ) }
                    />
                    <TextControl
                        label="Checkout Page URL"
                        value={ attributes.checkoutPageUrl }
                        onChange={ ( val ) => setAttributes( { checkoutPageUrl: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
