import { useEffect } from '@wordpress/element'
import { registerBlockType } from '@wordpress/blocks'
import {
    useBlockProps,
    MediaUpload,
    MediaUploadCheck,
    InspectorControls,
    RichText
} from '@wordpress/block-editor'
import {
    PanelBody,
    Button,
    SelectControl,
    TextControl,
    RangeControl,
    __experimentalInputControl as InputControl
} from '@wordpress/components'
import { FaChevronRight } from 'react-icons/fa'

import './index.scss'

const ASPECT_RATIO_OPTIONS = [
    { label: '16:9 (Widescreen)', value: '16/9' },
    { label: '4:3 (Standard)', value: '4/3' },
    { label: '3:2 (Photo)', value: '3/2' },
    { label: '1:1 (Square)', value: '1/1' },
    { label: '21:9 (Ultrawide)', value: '21/9' },
]

registerBlockType('bw/room-box', {
    edit: ({ attributes, setAttributes, clientId }) => {
        const blockProps = useBlockProps({
            className: 'bw-room-box-editor'
        })

        useEffect(() => {
            if (!attributes.blockId) {
                setAttributes({ blockId: clientId })
            }
        }, [])

        const onSelectImage = (media) => {
            setAttributes({
                imageId: media.id,
                imageUrl: media.url,
                imageAlt: media.alt || ''
            })
        }

        const onRemoveImage = () => {
            setAttributes({
                imageId: 0,
                imageUrl: '',
                imageAlt: ''
            })
        }

        return (
            <>
                <InspectorControls>
                    <PanelBody title="Image Settings" initialOpen={true}>
                        <SelectControl
                            label="Aspect Ratio"
                            value={attributes.aspectRatio}
                            options={ASPECT_RATIO_OPTIONS}
                            onChange={(value) => setAttributes({ aspectRatio: value })}
                        />
                        <RangeControl
                            label="Hover Zoom Level"
                            value={attributes.zoomLevel}
                            onChange={(value) => setAttributes({ zoomLevel: value })}
                            min={1}
                            max={1.2}
                            step={0.01}
                            help="1 = no zoom, 1.05 = subtle, 1.1 = moderate"
                        />
                        <RangeControl
                            label="Border Radius"
                            value={attributes.borderRadius}
                            onChange={(value) => setAttributes({ borderRadius: value })}
                            min={0}
                            max={30}
                            step={1}
                            help="Corner roundness in pixels"
                        />
                    </PanelBody>
                    <PanelBody title="Link Settings" initialOpen={true}>
                        <TextControl
                            label="Link URL"
                            value={attributes.linkUrl}
                            onChange={(value) => setAttributes({ linkUrl: value })}
                            placeholder="/rooms/room-name/"
                            help="The URL this room box will link to"
                        />
                        <TextControl
                            label="Button Text"
                            value={attributes.buttonText}
                            onChange={(value) => setAttributes({ buttonText: value })}
                            placeholder="View More"
                        />
                    </PanelBody>
                </InspectorControls>

                <div {...blockProps}>
                    <div className="bw-room-box">
                        <div
                            className="bw-room-box__image-wrapper"
                            style={{ aspectRatio: attributes.aspectRatio }}
                        >
                            <MediaUploadCheck>
                                <MediaUpload
                                    onSelect={onSelectImage}
                                    allowedTypes={['image']}
                                    value={attributes.imageId}
                                    render={({ open }) => (
                                        <>
                                            {attributes.imageUrl ? (
                                                <div className="bw-room-box__image-container">
                                                    <img
                                                        src={attributes.imageUrl}
                                                        alt={attributes.imageAlt}
                                                        className="bw-room-box__image"
                                                    />
                                                    <div className="bw-room-box__image-controls">
                                                        <Button
                                                            onClick={open}
                                                            variant="secondary"
                                                            size="small"
                                                        >
                                                            Replace Image
                                                        </Button>
                                                        <Button
                                                            onClick={onRemoveImage}
                                                            variant="secondary"
                                                            isDestructive
                                                            size="small"
                                                        >
                                                            Remove
                                                        </Button>
                                                    </div>
                                                </div>
                                            ) : (
                                                <div className="bw-room-box__placeholder" onClick={open}>
                                                    <Button variant="secondary">
                                                        Select Image
                                                    </Button>
                                                </div>
                                            )}
                                        </>
                                    )}
                                />
                            </MediaUploadCheck>
                        </div>
                        <div className="bw-room-box__bar">
                            <RichText
                                tagName="span"
                                className="bw-room-box__title"
                                value={attributes.title}
                                onChange={(value) => setAttributes({ title: value })}
                                placeholder="Room Title"
                                allowedFormats={[]}
                            />
                            <span className="bw-room-box__button">
                                <span className="bw-room-box__button-text">{attributes.buttonText}</span>
                                <FaChevronRight className="bw-room-box__button-icon" />
                            </span>
                        </div>
                    </div>
                </div>
            </>
        )
    },

    save: ({ attributes }) => {
        const blockProps = useBlockProps.save({
            className: 'bw-room-box-wrapper'
        })

        const boxStyle = {
            '--bw-room-box-zoom': attributes.zoomLevel,
            borderRadius: `${attributes.borderRadius}px`
        }

        return (
            <div {...blockProps}>
                <a
                    href={attributes.linkUrl || '#'}
                    className="bw-room-box"
                    aria-label={attributes.title}
                    style={boxStyle}
                >
                    <div
                        className="bw-room-box__image-wrapper"
                        style={{ aspectRatio: attributes.aspectRatio }}
                    >
                        {attributes.imageUrl && (
                            <img
                                src={attributes.imageUrl}
                                alt={attributes.imageAlt}
                                className="bw-room-box__image"
                                loading="lazy"
                            />
                        )}
                    </div>
                    <div className="bw-room-box__bar">
                        <span className="bw-room-box__title">{attributes.title}</span>
                        <span className="bw-room-box__button">
                            <span className="bw-room-box__button-text">{attributes.buttonText}</span>
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="bw-room-box__button-icon"
                                aria-hidden="true"
                            >
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </span>
                    </div>
                </a>
            </div>
        )
    }
})