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/customer-account/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Login/Register Settings">
                    <ToggleControl
                        label="Show Login Form"
                        checked={ attributes.showLogin === 'yes' }
                        onChange={ ( val ) => setAttributes( { showLogin: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Register Form"
                        checked={ attributes.showRegister === 'yes' }
                        onChange={ ( val ) => setAttributes( { showRegister: val ? 'yes' : '' } ) }
                    />
                    <TextControl
                        label="Redirect After Login URL"
                        value={ attributes.redirectAfterLogin }
                        onChange={ ( val ) => setAttributes( { redirectAfterLogin: val } ) }
                        help="Leave empty to stay on the current page."
                    />
                </PanelBody>
                <PanelBody title="Dashboard Settings" initialOpen={ false }>
                    <TextControl
                        label="Orders Per Page"
                        type="number"
                        value={ attributes.ordersPerPage }
                        onChange={ ( val ) => setAttributes( { ordersPerPage: parseInt( val, 10 ) || 10 } ) }
                    />
                    <SelectControl
                        label="Default Tab"
                        value={ attributes.defaultTab }
                        options={ [
                            { label: 'Orders', value: 'orders' },
                            { label: 'Downloads', value: 'downloads' },
                            { label: 'Wishlists', value: 'wishlists' },
                            { label: 'Profile', value: 'profile' },
                            { label: 'Addresses', value: 'addresses' },
                        ] }
                        onChange={ ( val ) => setAttributes( { defaultTab: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
