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/address-form/block.json';

const headingTagOptions = [
    { 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' },
];

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <TextControl
                        label="Form Title"
                        value={ attributes.formTitle }
                        onChange={ ( val ) => setAttributes( { formTitle: val } ) }
                    />
                    <SelectControl
                        label="Title HTML Tag"
                        value={ attributes.titleTag }
                        options={ headingTagOptions }
                        onChange={ ( val ) => setAttributes( { titleTag: val } ) }
                    />
                    <ToggleControl
                        label="Show Address Label Field"
                        checked={ attributes.showAddressLabel === 'yes' }
                        onChange={ ( val ) => setAttributes( { showAddressLabel: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Company Field"
                        checked={ attributes.showCompany === 'yes' }
                        onChange={ ( val ) => setAttributes( { showCompany: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
