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

import metadata from '../../../blocks/tags/product-description/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Description 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 } ) }
                        />
                    ) }
                    <SelectControl
                        label="Description Type"
                        value={ attributes.descriptionType }
                        options={ [
                            { label: 'Full Description', value: 'full' },
                            { label: 'Short Description', value: 'short' },
                            { label: 'Auto Excerpt', value: 'excerpt' },
                        ] }
                        onChange={ ( val ) => setAttributes( { descriptionType: val } ) }
                    />
                    { attributes.descriptionType === 'excerpt' && (
                        <>
                            <RangeControl
                                label="Excerpt Length (words)"
                                value={ attributes.excerptLength }
                                onChange={ ( val ) => setAttributes( { excerptLength: val } ) }
                                min={ 5 }
                                max={ 100 }
                            />
                            <ToggleControl
                                label="Show Read More"
                                checked={ attributes.showReadMore === 'yes' }
                                onChange={ ( val ) =>
                                    setAttributes( { showReadMore: val ? 'yes' : 'no' } )
                                }
                            />
                            { attributes.showReadMore === 'yes' && (
                                <>
                                    <TextControl
                                        label="Read More Text"
                                        value={ attributes.readMoreText }
                                        onChange={ ( val ) =>
                                            setAttributes( { readMoreText: val } )
                                        }
                                    />
                                    <TextControl
                                        label="Read Less Text"
                                        value={ attributes.readLessText }
                                        onChange={ ( val ) =>
                                            setAttributes( { readLessText: val } )
                                        }
                                    />
                                </>
                            ) }
                        </>
                    ) }
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
