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/checkout/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="Checkout Settings">
                    <ToggleControl
                        label="Show Shipping Fields"
                        checked={ attributes.showShippingFields === 'yes' }
                        onChange={ ( val ) => setAttributes( { showShippingFields: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Enable Order Notes"
                        checked={ attributes.enableOrderNotes === 'yes' }
                        onChange={ ( val ) => setAttributes( { enableOrderNotes: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
                <PanelBody title="Section Headings" initialOpen={ false }>
                    <TextControl
                        label="Customer Information Heading"
                        value={ attributes.customerInfoHeading }
                        onChange={ ( val ) => setAttributes( { customerInfoHeading: val } ) }
                    />
                    <SelectControl
                        label="Customer Info HTML Tag"
                        value={ attributes.customerInfoHeadingTag }
                        options={ headingTagOptions }
                        onChange={ ( val ) => setAttributes( { customerInfoHeadingTag: val } ) }
                    />
                    { attributes.showShippingFields === 'yes' && (
                        <>
                            <TextControl
                                label="Shipping Heading"
                                value={ attributes.shippingHeading }
                                onChange={ ( val ) => setAttributes( { shippingHeading: val } ) }
                            />
                            <SelectControl
                                label="Shipping HTML Tag"
                                value={ attributes.shippingHeadingTag }
                                options={ headingTagOptions }
                                onChange={ ( val ) => setAttributes( { shippingHeadingTag: val } ) }
                            />
                        </>
                    ) }
                    <TextControl
                        label="Billing Heading"
                        value={ attributes.billingHeading }
                        onChange={ ( val ) => setAttributes( { billingHeading: val } ) }
                    />
                    <SelectControl
                        label="Billing HTML Tag"
                        value={ attributes.billingHeadingTag }
                        options={ headingTagOptions }
                        onChange={ ( val ) => setAttributes( { billingHeadingTag: val } ) }
                    />
                    <TextControl
                        label="Payment Heading"
                        value={ attributes.paymentHeading }
                        onChange={ ( val ) => setAttributes( { paymentHeading: val } ) }
                    />
                    <SelectControl
                        label="Payment HTML Tag"
                        value={ attributes.paymentHeadingTag }
                        options={ headingTagOptions }
                        onChange={ ( val ) => setAttributes( { paymentHeadingTag: val } ) }
                    />
                    <TextControl
                        label="Order Summary Heading"
                        value={ attributes.orderSummaryHeading }
                        onChange={ ( val ) => setAttributes( { orderSummaryHeading: val } ) }
                    />
                    <SelectControl
                        label="Order Summary HTML Tag"
                        value={ attributes.orderSummaryHeadingTag }
                        options={ headingTagOptions }
                        onChange={ ( val ) => setAttributes( { orderSummaryHeadingTag: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Order Summary Settings" initialOpen={ false }>
                    <ToggleControl
                        label="Show Product Images"
                        checked={ attributes.showProductImages === 'yes' }
                        onChange={ ( val ) => setAttributes( { showProductImages: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Link Product Name"
                        checked={ attributes.linkProductName === 'yes' }
                        onChange={ ( val ) => setAttributes( { linkProductName: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Sticky Order Summary"
                        checked={ attributes.orderSummarySticky === 'yes' }
                        onChange={ ( val ) => setAttributes( { orderSummarySticky: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
                <PanelBody title="Discount Code" initialOpen={ false }>
                    <ToggleControl
                        label="Show Discount Input"
                        checked={ attributes.showDiscountInput === 'yes' }
                        onChange={ ( val ) => setAttributes( { showDiscountInput: val ? 'yes' : '' } ) }
                    />
                    { attributes.showDiscountInput === 'yes' && (
                        <>
                            <ToggleControl
                                label="Collapsible"
                                checked={ attributes.discountCollapsible === 'yes' }
                                onChange={ ( val ) => setAttributes( { discountCollapsible: val ? 'yes' : '' } ) }
                            />
                            <TextControl
                                label="Label Text"
                                value={ attributes.discountLabel }
                                onChange={ ( val ) => setAttributes( { discountLabel: val } ) }
                            />
                            <TextControl
                                label="Input Placeholder"
                                value={ attributes.discountPlaceholder }
                                onChange={ ( val ) => setAttributes( { discountPlaceholder: val } ) }
                            />
                            <TextControl
                                label="Button Text"
                                value={ attributes.discountButtonText }
                                onChange={ ( val ) => setAttributes( { discountButtonText: val } ) }
                            />
                        </>
                    ) }
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
