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 ProductSearchControl from '../../components/ProductSearchControl';

import metadata from '../../../blocks/tags/add-to-cart/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Cart Settings">
                    <SelectControl
                        label="Product Source"
                        value={ attributes.productSource }
                        options={ [
                            { label: 'Current Product (Auto-detect)', value: 'current' },
                            { label: 'Select Product', value: 'custom' },
                        ] }
                        onChange={ ( val ) => setAttributes( { productSource: val } ) }
                    />
                    { attributes.productSource === 'custom' && (
                        <ProductSearchControl
                            value={ attributes.productId }
                            onChange={ ( val ) => setAttributes( { productId: val } ) }
                        />
                    ) }
                    <TextControl
                        label="Button Text"
                        value={ attributes.buttonText }
                        onChange={ ( val ) => setAttributes( { buttonText: val } ) }
                    />
                    <SelectControl
                        label="Layout"
                        value={ attributes.layout }
                        options={ [
                            { label: 'Horizontal', value: 'horizontal' },
                            { label: 'Vertical', value: 'vertical' },
                        ] }
                        onChange={ ( val ) => setAttributes( { layout: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Variable Products" initialOpen={ false }>
                    <TextControl
                        label="Variable Product Button Text"
                        value={ attributes.variableButtonText }
                        onChange={ ( val ) => setAttributes( { variableButtonText: val } ) }
                    />
                    <SelectControl
                        label="Variable Product Behavior"
                        value={ attributes.variableProductBehavior }
                        options={ [
                            { label: 'Link to Product Page', value: 'link_to_product' },
                            { label: 'Disabled (wait for selection)', value: 'disabled' },
                            { label: 'Show Variation Selector', value: 'show_selector' },
                        ] }
                        onChange={ ( val ) => setAttributes( { variableProductBehavior: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Quantity" initialOpen={ false }>
                    <ToggleControl
                        label="Show Quantity Selector"
                        checked={ attributes.showQuantity === 'yes' }
                        onChange={ ( val ) => setAttributes( { showQuantity: val ? 'yes' : '' } ) }
                    />
                    { attributes.showQuantity === 'yes' && (
                        <>
                            <TextControl
                                label="Quantity Label"
                                value={ attributes.quantityLabel }
                                onChange={ ( val ) => setAttributes( { quantityLabel: 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 } ) }
                            />
                        </>
                    ) }
                </PanelBody>
                <PanelBody title="Price Display" initialOpen={ false }>
                    <ToggleControl
                        label="Show Price"
                        checked={ attributes.showPrice === 'yes' }
                        onChange={ ( val ) => setAttributes( { showPrice: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.showPrice === 'yes' && (
                        <TextControl
                            label="Variable Price Prefix"
                            value={ attributes.pricePrefixText }
                            onChange={ ( val ) => setAttributes( { pricePrefixText: val } ) }
                        />
                    ) }
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
