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 metadata from '../../../blocks/premium/wishlist/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <SelectControl
                        label="Display Mode"
                        value={ attributes.wishlistMode }
                        options={ [
                            { label: 'Default Wishlist', value: 'default' },
                            { label: 'Specific Wishlist', value: 'specific' },
                            { label: 'All Wishlists (Tabbed)', value: 'all' },
                            { label: 'Dropdown Selector', value: 'dropdown' },
                        ] }
                        onChange={ ( val ) => setAttributes( { wishlistMode: val } ) }
                    />
                    { attributes.wishlistMode === 'specific' && (
                        <TextControl
                            label="Wishlist ID"
                            value={ attributes.wishlistId }
                            onChange={ ( val ) => setAttributes( { wishlistId: val } ) }
                            help="Enter a wishlist ID to display, or leave empty to auto-detect."
                        />
                    ) }
                    { ( attributes.wishlistMode === 'all' || attributes.wishlistMode === 'dropdown' ) && (
                        <>
                            <ToggleControl
                                label="Show Management Controls"
                                checked={ attributes.showManagement === 'yes' }
                                onChange={ ( val ) => setAttributes( { showManagement: val ? 'yes' : '' } ) }
                            />
                            <ToggleControl
                                label="Show Move/Copy Options"
                                checked={ attributes.showMoveCopy === 'yes' }
                                onChange={ ( val ) => setAttributes( { showMoveCopy: val ? 'yes' : '' } ) }
                            />
                        </>
                    ) }
                    <ToggleControl
                        label="Show Share Button"
                        checked={ attributes.showSharing === 'yes' }
                        onChange={ ( val ) => setAttributes( { showSharing: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Title"
                        checked={ attributes.showTitle === 'yes' }
                        onChange={ ( val ) => setAttributes( { showTitle: val ? 'yes' : '' } ) }
                    />
                    { attributes.showTitle === 'yes' && (
                        <>
                            <SelectControl
                                label="Title Source"
                                value={ attributes.titleSource }
                                options={ [
                                    { label: 'Wishlist Name', value: 'wishlist_name' },
                                    { label: 'Custom Text', value: 'custom' },
                                ] }
                                onChange={ ( val ) => setAttributes( { titleSource: val } ) }
                            />
                            { attributes.titleSource === 'custom' && (
                                <TextControl
                                    label="Custom Title"
                                    value={ attributes.title }
                                    onChange={ ( val ) => setAttributes( { title: val } ) }
                                />
                            ) }
                        </>
                    ) }
                    <TextareaControl
                        label="Empty Wishlist Message"
                        value={ attributes.emptyMessage }
                        onChange={ ( val ) => setAttributes( { emptyMessage: val } ) }
                    />
                    <ToggleControl
                        label="Show Remove Button"
                        checked={ attributes.showRemoveButton === 'yes' }
                        onChange={ ( val ) => setAttributes( { showRemoveButton: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Add to Cart Button"
                        checked={ attributes.showAddToCart === 'yes' }
                        onChange={ ( val ) => setAttributes( { showAddToCart: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Show Clear All Button"
                        checked={ attributes.showClearAll === 'yes' }
                        onChange={ ( val ) => setAttributes( { showClearAll: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender block={ metadata.name } attributes={ attributes } />
        </>
    ),
    save: () => null,
} );
