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/taxonomy-header/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <SelectControl
                        label="Taxonomy Type"
                        value={ attributes.taxonomy_type }
                        options={ [
                            { label: 'Auto-detect from URL', value: 'auto' },
                            { label: 'Category', value: 'category' },
                            { label: 'Tag', value: 'tag' },
                        ] }
                        onChange={ ( val ) => setAttributes( { taxonomy_type: val } ) }
                    />
                    <ToggleControl
                        label="Show Image"
                        help="Only available for categories with uploaded images"
                        checked={ attributes.show_image === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_image: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Title"
                        checked={ attributes.show_title === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_title: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_title === 'yes' && (
                        <>
                            <TextControl
                                label="Title Prefix"
                                value={ attributes.title_prefix }
                                onChange={ ( val ) => setAttributes( { title_prefix: val } ) }
                                placeholder='e.g., "Category: " or "Browse "'
                            />
                            <SelectControl
                                label="Title HTML Tag"
                                value={ attributes.title_tag }
                                options={ [
                                    { label: 'H1', value: 'h1' },
                                    { label: 'H2', value: 'h2' },
                                    { label: 'H3', value: 'h3' },
                                    { label: 'H4', value: 'h4' },
                                    { label: 'H5', value: 'h5' },
                                    { label: 'H6', value: 'h6' },
                                    { label: 'div', value: 'div' },
                                    { label: 'span', value: 'span' },
                                    { label: 'p', value: 'p' },
                                ] }
                                onChange={ ( val ) => setAttributes( { title_tag: val } ) }
                            />
                        </>
                    ) }
                    <ToggleControl
                        label="Show Description"
                        checked={ attributes.show_description === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_description: val ? 'yes' : 'no' } ) }
                    />
                    <ToggleControl
                        label="Show Product Count"
                        checked={ attributes.show_product_count === 'yes' }
                        onChange={ ( val ) => setAttributes( { show_product_count: val ? 'yes' : 'no' } ) }
                    />
                    { attributes.show_product_count === 'yes' && (
                        <TextControl
                            label="Product Count Format"
                            help="Use {count} as placeholder for the number"
                            value={ attributes.product_count_format }
                            onChange={ ( val ) => setAttributes( { product_count_format: val } ) }
                        />
                    ) }
                    <SelectControl
                        label="Alignment"
                        value={ attributes.alignment }
                        options={ [
                            { label: 'Left', value: 'left' },
                            { label: 'Center', value: 'center' },
                            { label: 'Right', value: 'right' },
                        ] }
                        onChange={ ( val ) => setAttributes( { alignment: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
