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

import metadata from '../../../blocks/tags/order-confirmation/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Success Message">
                    <ToggleControl
                        label="Show Success Icon"
                        checked={ attributes.showSuccessIcon === 'yes' }
                        onChange={ ( val ) => setAttributes( { showSuccessIcon: val ? 'yes' : '' } ) }
                    />
                    <TextControl
                        label="Success Title"
                        value={ attributes.successTitle }
                        onChange={ ( val ) => setAttributes( { successTitle: val } ) }
                    />
                    <TextControl
                        label="Success Message"
                        value={ attributes.successMessage }
                        onChange={ ( val ) => setAttributes( { successMessage: val } ) }
                    />
                    <TextControl
                        label="No Order Message"
                        value={ attributes.noOrderMessage }
                        onChange={ ( val ) => setAttributes( { noOrderMessage: val } ) }
                    />
                </PanelBody>
                <PanelBody title="Content Visibility" initialOpen={ false }>
                    <ToggleControl
                        label="Show Order Number"
                        checked={ attributes.showOrderNumber === 'yes' }
                        onChange={ ( val ) => setAttributes( { showOrderNumber: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Order Date"
                        checked={ attributes.showOrderDate === 'yes' }
                        onChange={ ( val ) => setAttributes( { showOrderDate: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Order Items"
                        checked={ attributes.showOrderItems === 'yes' }
                        onChange={ ( val ) => setAttributes( { showOrderItems: val ? 'yes' : '' } ) }
                    />
                    { attributes.showOrderItems === 'yes' && (
                        <>
                            <ToggleControl
                                label="Show Order Items Title"
                                checked={ attributes.showOrderItemsTitle === 'yes' }
                                onChange={ ( val ) => setAttributes( { showOrderItemsTitle: val ? 'yes' : '' } ) }
                            />
                            { attributes.showOrderItemsTitle === 'yes' && (
                                <TextControl
                                    label="Order Items Title"
                                    value={ attributes.orderItemsTitle }
                                    onChange={ ( val ) => setAttributes( { orderItemsTitle: val } ) }
                                />
                            ) }
                        </>
                    ) }
                    <ToggleControl
                        label="Show Order Totals"
                        checked={ attributes.showTotals === 'yes' }
                        onChange={ ( val ) => setAttributes( { showTotals: val ? 'yes' : '' } ) }
                    />
                    { attributes.showTotals === 'yes' && (
                        <>
                            <ToggleControl
                                label="Show Order Summary Title"
                                checked={ attributes.showTotalsTitle === 'yes' }
                                onChange={ ( val ) => setAttributes( { showTotalsTitle: val ? 'yes' : '' } ) }
                            />
                            { attributes.showTotalsTitle === 'yes' && (
                                <TextControl
                                    label="Order Summary Title"
                                    value={ attributes.totalsTitle }
                                    onChange={ ( val ) => setAttributes( { totalsTitle: val } ) }
                                />
                            ) }
                        </>
                    ) }
                    <ToggleControl
                        label="Show Payment Method"
                        checked={ attributes.showPaymentMethod === 'yes' }
                        onChange={ ( val ) => setAttributes( { showPaymentMethod: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
                <PanelBody title="Addresses" initialOpen={ false }>
                    <ToggleControl
                        label="Show Billing Address"
                        checked={ attributes.showBillingAddress === 'yes' }
                        onChange={ ( val ) => setAttributes( { showBillingAddress: val ? 'yes' : '' } ) }
                    />
                    { attributes.showBillingAddress === 'yes' && (
                        <>
                            <ToggleControl
                                label="Show Billing Address Title"
                                checked={ attributes.showBillingAddressTitle === 'yes' }
                                onChange={ ( val ) => setAttributes( { showBillingAddressTitle: val ? 'yes' : '' } ) }
                            />
                            { attributes.showBillingAddressTitle === 'yes' && (
                                <TextControl
                                    label="Billing Address Title"
                                    value={ attributes.billingAddressTitle }
                                    onChange={ ( val ) => setAttributes( { billingAddressTitle: val } ) }
                                />
                            ) }
                        </>
                    ) }
                    <ToggleControl
                        label="Show Shipping Address"
                        checked={ attributes.showShippingAddress === 'yes' }
                        onChange={ ( val ) => setAttributes( { showShippingAddress: val ? 'yes' : '' } ) }
                    />
                    { attributes.showShippingAddress === 'yes' && (
                        <>
                            <ToggleControl
                                label="Show Shipping Address Title"
                                checked={ attributes.showShippingAddressTitle === 'yes' }
                                onChange={ ( val ) => setAttributes( { showShippingAddressTitle: val ? 'yes' : '' } ) }
                            />
                            { attributes.showShippingAddressTitle === 'yes' && (
                                <TextControl
                                    label="Shipping Address Title"
                                    value={ attributes.shippingAddressTitle }
                                    onChange={ ( val ) => setAttributes( { shippingAddressTitle: val } ) }
                                />
                            ) }
                        </>
                    ) }
                </PanelBody>
                <PanelBody title="Continue Shopping" initialOpen={ false }>
                    <ToggleControl
                        label="Show Continue Shopping Button"
                        checked={ attributes.showContinueShopping === 'yes' }
                        onChange={ ( val ) => setAttributes( { showContinueShopping: val ? 'yes' : '' } ) }
                    />
                    { attributes.showContinueShopping === 'yes' && (
                        <TextControl
                            label="Continue Shopping Text"
                            value={ attributes.continueShoppingText }
                            onChange={ ( val ) => setAttributes( { continueShoppingText: val } ) }
                        />
                    ) }
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
