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 ProductSearchControl from '../../components/ProductSearchControl';

import metadata from '../../../blocks/tags/product-image-grid/block.json';

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Content">
                    <SelectControl
                        label="Product Source"
                        value={ attributes.productSource }
                        options={ [
                            { label: 'Current Product (Auto-detect)', value: 'current' },
                            { label: 'Select Product', value: 'custom' },
                        ] }
                        onChange={ ( val ) => setAttributes( { productSource: val } ) }
                    />
                    { attributes.productSource === 'custom' && (
                        <ProductSearchControl
                            value={ attributes.productId }
                            onChange={ ( val ) => setAttributes( { productId: val } ) }
                        />
                    ) }
                    <SelectControl
                        label="Image Size"
                        value={ attributes.imageSize }
                        options={ [
                            { label: 'Thumbnail (150px)', value: 'thumbnail' },
                            { label: 'Medium (300px)', value: 'medium' },
                            { label: 'Large (600px)', value: 'large' },
                            { label: 'Full (Original)', value: 'full' },
                        ] }
                        onChange={ ( val ) => setAttributes( { imageSize: val } ) }
                    />
                </PanelBody>

                <PanelBody title="Layout" initialOpen={ false }>
                    <SelectControl
                        label="Layout"
                        value={ attributes.layoutPreset }
                        options={ [
                            { label: 'Standard Grid', value: 'standard-grid' },
                            { label: 'Featured + Grid', value: 'featured-grid' },
                            { label: 'Masonry', value: 'masonry' },
                            { label: 'Alternating Rows', value: 'alternating' },
                        ] }
                        onChange={ ( val ) => setAttributes( { layoutPreset: val } ) }
                    />
                    { attributes.layoutPreset !== 'masonry' && (
                        <SelectControl
                            label="Columns"
                            value={ attributes.gridColumns }
                            options={ [
                                { label: '2', value: '2' },
                                { label: '3', value: '3' },
                                { label: '4', value: '4' },
                                { label: '5', value: '5' },
                                { label: '6', value: '6' },
                            ] }
                            onChange={ ( val ) => setAttributes( { gridColumns: val } ) }
                        />
                    ) }
                    { attributes.layoutPreset === 'masonry' && (
                        <SelectControl
                            label="Columns"
                            value={ attributes.masonryColumns }
                            options={ [
                                { label: '2', value: '2' },
                                { label: '3', value: '3' },
                                { label: '4', value: '4' },
                                { label: '5', value: '5' },
                                { label: '6', value: '6' },
                            ] }
                            onChange={ ( val ) => setAttributes( { masonryColumns: val } ) }
                        />
                    ) }
                    { attributes.layoutPreset === 'featured-grid' && (
                        <SelectControl
                            label="Featured Image Size"
                            value={ attributes.featuredSpan }
                            options={ [
                                { label: '2 Columns x 2 Rows', value: '2x2' },
                                { label: '2 Columns x 1 Row', value: '2x1' },
                                { label: '1 Column x 2 Rows', value: '1x2' },
                            ] }
                            onChange={ ( val ) => setAttributes( { featuredSpan: val } ) }
                        />
                    ) }
                    { attributes.layoutPreset === 'alternating' && (
                        <>
                            <TextControl
                                label="Primary Row Count"
                                help="Number of images in odd rows"
                                type="number"
                                value={ attributes.alternatingPrimary }
                                onChange={ ( val ) => setAttributes( { alternatingPrimary: parseInt( val, 10 ) || 3 } ) }
                            />
                            <TextControl
                                label="Secondary Row Count"
                                help="Number of images in even rows"
                                type="number"
                                value={ attributes.alternatingSecondary }
                                onChange={ ( val ) => setAttributes( { alternatingSecondary: parseInt( val, 10 ) || 2 } ) }
                            />
                        </>
                    ) }
                    { attributes.layoutPreset !== 'masonry' && (
                        <SelectControl
                            label="Image Aspect Ratio"
                            value={ attributes.imageAspectRatio }
                            options={ [
                                { label: 'Original', value: 'original' },
                                { label: '1:1 Square', value: '1-1' },
                                { label: '4:3', value: '4-3' },
                                { label: '3:2', value: '3-2' },
                                { label: '16:9', value: '16-9' },
                            ] }
                            onChange={ ( val ) => setAttributes( { imageAspectRatio: val } ) }
                        />
                    ) }
                </PanelBody>

                <PanelBody title="Lightbox" initialOpen={ false }>
                    <ToggleControl
                        label="Enable Lightbox"
                        checked={ attributes.showLightbox === 'yes' }
                        onChange={ ( val ) => setAttributes( { showLightbox: val ? 'yes' : '' } ) }
                    />
                </PanelBody>

                <PanelBody title="Performance" initialOpen={ false }>
                    <ToggleControl
                        label="Lazy Loading"
                        checked={ attributes.enableLazyLoading === 'yes' }
                        onChange={ ( val ) => setAttributes( { enableLazyLoading: val ? 'yes' : '' } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
