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

import metadata from '../../../blocks/premium/product-comparison/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' : '' } ) }
                    />
                    <TextareaControl
                        label="Empty Message"
                        value={ attributes.emptyMessage }
                        onChange={ ( val ) => setAttributes( { emptyMessage: val } ) }
                    />
                    <ToggleControl
                        label="Show Add Products CTA"
                        checked={ attributes.showAddProductsCta === 'yes' }
                        onChange={ ( val ) => setAttributes( { showAddProductsCta: val ? 'yes' : '' } ) }
                    />
                    { attributes.showAddProductsCta === 'yes' && (
                        <>
                            <TextControl
                                label="Shop Page URL"
                                value={ attributes.addProductsUrl }
                                onChange={ ( val ) => setAttributes( { addProductsUrl: val } ) }
                            />
                            <TextControl
                                label="Add Products Button Text"
                                value={ attributes.addProductsText }
                                onChange={ ( val ) => setAttributes( { addProductsText: val } ) }
                            />
                        </>
                    ) }
                </PanelBody>
                <PanelBody title="Comparison Fields" initialOpen={ false }>
                    <ToggleControl
                        label="Product Image"
                        checked={ attributes.showImage === 'yes' }
                        onChange={ ( val ) => setAttributes( { showImage: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Product Name"
                        checked={ attributes.showName === 'yes' }
                        onChange={ ( val ) => setAttributes( { showName: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Price"
                        checked={ attributes.showPrice === 'yes' }
                        onChange={ ( val ) => setAttributes( { showPrice: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Stock Status"
                        checked={ attributes.showStock === 'yes' }
                        onChange={ ( val ) => setAttributes( { showStock: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="SKU"
                        checked={ attributes.showSku === 'yes' }
                        onChange={ ( val ) => setAttributes( { showSku: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Short Description"
                        checked={ attributes.showDescription === 'yes' }
                        onChange={ ( val ) => setAttributes( { showDescription: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Categories"
                        checked={ attributes.showCategories === 'yes' }
                        onChange={ ( val ) => setAttributes( { showCategories: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Tags"
                        checked={ attributes.showTags === 'yes' }
                        onChange={ ( val ) => setAttributes( { showTags: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Rating"
                        checked={ attributes.showRating === 'yes' }
                        onChange={ ( val ) => setAttributes( { showRating: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Weight"
                        checked={ attributes.showWeight === 'yes' }
                        onChange={ ( val ) => setAttributes( { showWeight: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Dimensions"
                        checked={ attributes.showDimensions === 'yes' }
                        onChange={ ( val ) => setAttributes( { showDimensions: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Add to Cart Button"
                        checked={ attributes.showAddToCart === 'yes' }
                        onChange={ ( val ) => setAttributes( { showAddToCart: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Custom Attributes"
                        checked={ attributes.showCustomAttributes === 'yes' }
                        onChange={ ( val ) => setAttributes( { showCustomAttributes: val ? 'yes' : '' } ) }
                    />
                    { attributes.showCustomAttributes === 'yes' && (
                        <>
                            <ToggleControl
                                label="Show Attribute Icons"
                                checked={ attributes.showAttributeIcon === 'yes' }
                                onChange={ ( val ) => setAttributes( { showAttributeIcon: val ? 'yes' : '' } ) }
                            />
                            <ToggleControl
                                label="Show Attribute Units"
                                checked={ attributes.showAttributeUnit === 'yes' }
                                onChange={ ( val ) => setAttributes( { showAttributeUnit: val ? 'yes' : '' } ) }
                            />
                        </>
                    ) }
                    <ToggleControl
                        label="Barcode"
                        checked={ attributes.showBarcode === 'yes' }
                        onChange={ ( val ) => setAttributes( { showBarcode: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Kit Contents"
                        checked={ attributes.showKitContents === 'yes' }
                        onChange={ ( val ) => setAttributes( { showKitContents: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
