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

registerBlockType( metadata.name, {
    edit: ( { attributes, setAttributes } ) => (
        <>
            <InspectorControls>
                <PanelBody title="Gallery Configuration">
                    <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="Gallery Layout"
                        value={ attributes.galleryLayout }
                        options={ [
                            { label: 'Standard (Main + Thumbnails)', value: 'standard' },
                            { label: 'Image Slider', value: 'slider' },
                            { label: 'Grid Layout', value: 'grid' },
                        ] }
                        onChange={ ( val ) => setAttributes( { galleryLayout: val } ) }
                    />
                </PanelBody>

                { attributes.galleryLayout === 'standard' && (
                    <PanelBody title="Thumbnail Settings" initialOpen={ false }>
                        <SelectControl
                            label="Thumbnail Position"
                            value={ attributes.thumbnailPosition }
                            options={ [
                                { label: 'Bottom', value: 'bottom' },
                                { label: 'Top', value: 'top' },
                                { label: 'Left', value: 'left' },
                                { label: 'Right', value: 'right' },
                            ] }
                            onChange={ ( val ) => setAttributes( { thumbnailPosition: val } ) }
                        />
                        <TextControl
                            label="Max Visible Thumbnails"
                            type="number"
                            value={ attributes.maxVisibleThumbnails }
                            onChange={ ( val ) => setAttributes( { maxVisibleThumbnails: parseInt( val, 10 ) || 4 } ) }
                        />
                    </PanelBody>
                ) }

                { attributes.galleryLayout === 'slider' && (
                    <PanelBody title="Slider Settings" initialOpen={ false }>
                        <ToggleControl
                            label="Autoplay"
                            checked={ attributes.sliderAutoplay === 'yes' }
                            onChange={ ( val ) => setAttributes( { sliderAutoplay: val ? 'yes' : '' } ) }
                        />
                        { attributes.sliderAutoplay === 'yes' && (
                            <>
                                <TextControl
                                    label="Autoplay Speed (ms)"
                                    type="number"
                                    value={ attributes.sliderAutoplaySpeed }
                                    onChange={ ( val ) => setAttributes( { sliderAutoplaySpeed: parseInt( val, 10 ) || 3000 } ) }
                                />
                                <ToggleControl
                                    label="Pause on Hover"
                                    checked={ attributes.sliderPauseOnHover === 'yes' }
                                    onChange={ ( val ) => setAttributes( { sliderPauseOnHover: val ? 'yes' : '' } ) }
                                />
                            </>
                        ) }
                        <ToggleControl
                            label="Infinite Loop"
                            checked={ attributes.sliderLoop === 'yes' }
                            onChange={ ( val ) => setAttributes( { sliderLoop: val ? 'yes' : '' } ) }
                        />
                        <ToggleControl
                            label="Show Navigation Arrows"
                            checked={ attributes.sliderShowArrows === 'yes' }
                            onChange={ ( val ) => setAttributes( { sliderShowArrows: val ? 'yes' : '' } ) }
                        />
                        <ToggleControl
                            label="Show Dots Navigation"
                            checked={ attributes.sliderShowDots === 'yes' }
                            onChange={ ( val ) => setAttributes( { sliderShowDots: val ? 'yes' : '' } ) }
                        />
                        <SelectControl
                            label="Transition Effect"
                            value={ attributes.sliderTransition }
                            options={ [
                                { label: 'Slide', value: 'slide' },
                                { label: 'Fade', value: 'fade' },
                            ] }
                            onChange={ ( val ) => setAttributes( { sliderTransition: val } ) }
                        />
                        <TextControl
                            label="Transition Speed (ms)"
                            type="number"
                            value={ attributes.sliderTransitionSpeed }
                            onChange={ ( val ) => setAttributes( { sliderTransitionSpeed: parseInt( val, 10 ) || 500 } ) }
                        />
                    </PanelBody>
                ) }

                { attributes.galleryLayout === 'grid' && (
                    <PanelBody title="Grid Settings" initialOpen={ false }>
                        <SelectControl
                            label="Columns"
                            value={ attributes.gridColumns }
                            options={ [
                                { label: '1', value: '1' },
                                { 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 } ) }
                        />
                        <SelectControl
                            label="Image Aspect Ratio"
                            value={ attributes.gridImageRatio }
                            options={ [
                                { label: 'Square (1:1)', value: 'square' },
                                { label: 'Landscape (4:3)', value: 'landscape' },
                                { label: 'Portrait (3:4)', value: 'portrait' },
                                { label: 'Original', value: 'original' },
                            ] }
                            onChange={ ( val ) => setAttributes( { gridImageRatio: val } ) }
                        />
                        <ToggleControl
                            label="Feature First Image"
                            checked={ attributes.gridFirstImageFeatured === 'yes' }
                            onChange={ ( val ) => setAttributes( { gridFirstImageFeatured: val ? 'yes' : '' } ) }
                        />
                        { attributes.gridFirstImageFeatured === 'yes' && (
                            <SelectControl
                                label="Featured Image Size"
                                value={ attributes.gridFeaturedSpan }
                                options={ [
                                    { label: '2 Columns x 1 Row', value: '2x1' },
                                    { label: '2 Columns x 2 Rows', value: '2x2' },
                                    { label: '1 Column x 2 Rows', value: '1x2' },
                                ] }
                                onChange={ ( val ) => setAttributes( { gridFeaturedSpan: val } ) }
                            />
                        ) }
                    </PanelBody>
                ) }

                <PanelBody title="Lightbox Settings" initialOpen={ false }>
                    <ToggleControl
                        label="Enable Lightbox"
                        checked={ attributes.enableLightbox === 'yes' }
                        onChange={ ( val ) => setAttributes( { enableLightbox: val ? 'yes' : '' } ) }
                    />
                    { attributes.enableLightbox === 'yes' && (
                        <>
                            <SelectControl
                                label="Lightbox Animation"
                                value={ attributes.lightboxAnimation }
                                options={ [
                                    { label: 'Fade', value: 'fade' },
                                    { label: 'Slide', value: 'slide' },
                                    { label: 'Zoom', value: 'zoom' },
                                ] }
                                onChange={ ( val ) => setAttributes( { lightboxAnimation: val } ) }
                            />
                            <ToggleControl
                                label="Show Product Info in Lightbox"
                                checked={ attributes.lightboxProductInfo === 'yes' }
                                onChange={ ( val ) => setAttributes( { lightboxProductInfo: val ? 'yes' : '' } ) }
                            />
                            { attributes.lightboxProductInfo === 'yes' && (
                                <>
                                    <SelectControl
                                        label="Info Position"
                                        value={ attributes.lightboxInfoPosition }
                                        options={ [
                                            { label: 'Top', value: 'top' },
                                            { label: 'Bottom', value: 'bottom' },
                                            { label: 'Left', value: 'left' },
                                            { label: 'Right', value: 'right' },
                                        ] }
                                        onChange={ ( val ) => setAttributes( { lightboxInfoPosition: val } ) }
                                    />
                                    <ToggleControl
                                        label="Show Title"
                                        checked={ attributes.lightboxShowTitle === 'yes' }
                                        onChange={ ( val ) => setAttributes( { lightboxShowTitle: val ? 'yes' : '' } ) }
                                    />
                                    <ToggleControl
                                        label="Show Price"
                                        checked={ attributes.lightboxShowPrice === 'yes' }
                                        onChange={ ( val ) => setAttributes( { lightboxShowPrice: val ? 'yes' : '' } ) }
                                    />
                                    <ToggleControl
                                        label="Show Description"
                                        checked={ attributes.lightboxShowDescription === 'yes' }
                                        onChange={ ( val ) => setAttributes( { lightboxShowDescription: val ? 'yes' : '' } ) }
                                    />
                                    <ToggleControl
                                        label="Show Stock Status"
                                        checked={ attributes.lightboxShowStock === 'yes' }
                                        onChange={ ( val ) => setAttributes( { lightboxShowStock: val ? 'yes' : '' } ) }
                                    />
                                </>
                            ) }
                        </>
                    ) }
                </PanelBody>

                <PanelBody title="Zoom Settings" initialOpen={ false }>
                    <ToggleControl
                        label="Enable Zoom"
                        checked={ attributes.enableZoom === 'yes' }
                        onChange={ ( val ) => setAttributes( { enableZoom: val ? 'yes' : '' } ) }
                    />
                    { attributes.enableZoom === 'yes' && (
                        <SelectControl
                            label="Zoom Type"
                            value={ attributes.zoomType }
                            options={ [
                                { label: 'Inner Zoom', value: 'inner' },
                                { label: 'Lens Zoom', value: 'lens' },
                                { label: 'Window Zoom', value: 'window' },
                            ] }
                            onChange={ ( val ) => setAttributes( { zoomType: val } ) }
                        />
                    ) }
                </PanelBody>

                <PanelBody title="Performance Settings" initialOpen={ false }>
                    <ToggleControl
                        label="Enable Lazy Loading"
                        checked={ attributes.enableLazyLoading === 'yes' }
                        onChange={ ( val ) => setAttributes( { enableLazyLoading: val ? 'yes' : '' } ) }
                    />
                    <ToggleControl
                        label="Enable Image Preloading"
                        checked={ attributes.enablePreloading === 'yes' }
                        onChange={ ( val ) => setAttributes( { enablePreloading: val ? 'yes' : '' } ) }
                    />
                    <SelectControl
                        label="Image Quality"
                        value={ attributes.imageQuality }
                        options={ [
                            { label: 'Thumbnail (150px)', value: 'thumbnail' },
                            { label: 'Medium (300px)', value: 'medium' },
                            { label: 'Large (600px)', value: 'large' },
                            { label: 'Full Size', value: 'full' },
                        ] }
                        onChange={ ( val ) => setAttributes( { imageQuality: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block={ metadata.name }
                attributes={ attributes }
            />
        </>
    ),
    save: () => null,
} );
