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

import metadata from '../../../blocks/premium/review-form/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Form Settings">
                    <ProductSearchControl
                        value={ attributes.productId }
                        onChange={ ( val ) => setAttributes( { productId: val } ) }
                    />
                    <TextControl
                        label="Form Title"
                        value={ attributes.formTitle }
                        onChange={ ( val ) => setAttributes( { formTitle: val } ) }
                    />
                    <SelectControl
                        label="Title HTML Tag"
                        value={ attributes.titleHtmlTag }
                        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( { titleHtmlTag: val } ) }
                    />
                    <ToggleControl
                        label="Show Review Title Field"
                        checked={ attributes.showTitleField === 'yes' }
                        onChange={ ( val ) => setAttributes( { showTitleField: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Require Login"
                        checked={ attributes.requireLogin === 'yes' }
                        onChange={ ( val ) => setAttributes( { requireLogin: val ? 'yes' : '' } ) }
                    />
                    { attributes.requireLogin === 'yes' && (
                        <TextareaControl
                            label="Login Required Message"
                            value={ attributes.loginMessage }
                            onChange={ ( val ) => setAttributes( { loginMessage: val } ) }
                        />
                    ) }
                    <TextareaControl
                        label="Success Message"
                        value={ attributes.successMessage }
                        onChange={ ( val ) => setAttributes( { successMessage: val } ) }
                    />
                    <TextControl
                        label="Submit Button Text"
                        value={ attributes.submitButtonText }
                        onChange={ ( val ) => setAttributes( { submitButtonText: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Field Labels" initialOpen={ false }>
                    <TextControl
                        label="Rating Label"
                        value={ attributes.ratingLabel }
                        onChange={ ( val ) => setAttributes( { ratingLabel: val } ) }
                    />
                    { attributes.showTitleField === 'yes' && (
                        <TextControl
                            label="Title Label"
                            value={ attributes.titleLabel }
                            onChange={ ( val ) => setAttributes( { titleLabel: val } ) }
                        />
                    ) }
                    <TextControl
                        label="Review Content Label"
                        value={ attributes.contentLabel }
                        onChange={ ( val ) => setAttributes( { contentLabel: val } ) }
                    />
                    <TextControl
                        label="Name Label"
                        value={ attributes.nameLabel }
                        onChange={ ( val ) => setAttributes( { nameLabel: val } ) }
                    />
                    <TextControl
                        label="Email Label"
                        value={ attributes.emailLabel }
                        onChange={ ( val ) => setAttributes( { emailLabel: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
