// Import the UnitControl component for size input (width/height) with units.
const { __experimentalUnitControl: UnitControl } = wp.components;
const { __ } = wp.i18n;

// Import device context and switcher UI for handling responsive controls.
import DeviceSwitcher from './DeviceSwitcher';
import { useDevice } from './DeviceContext';

/**
 * Helper function to normalize the size values.
 * Ensures width/height values have proper unit formatting.
 *
 * @param {string|number} val - Input value.
 * @returns {string|undefined} - Normalized value with units or undefined.
 */
const normalize = ( val ) => {
    if ( 'number' === typeof val ) {
return `${val}px`;
}
    if ( 'string' === typeof val && val.match( /^\d+(px|%)$/ ) ) {
return val;
}
    return undefined;
};

/**
 * ImageSizeControls Component.
 *
 * Provides UI controls to set width and height of an image per device (responsive).
 * Uses UnitControl for values and a DeviceSwitcher for responsive toggling.
 *
 * @param {Object} props
 * @param {Object} props.imageSize - Object containing image sizes for different devices
 * @param {Function} props.setImageSize - Callback to update image size state
 */
const ImageSizeControls = ({ imageSize, setImageSize }) => {

    // Current device: 'desktop', 'tablet', or 'mobile'.
    const { activeDevice, setActiveDevice } = useDevice();

    // Get current device's width and height (fallback to 'auto' if undefined).
    const widthValue = normalize( imageSize?.[activeDevice]?.width ) || 'auto';
    const heightValue = normalize( imageSize?.[activeDevice]?.height ) || 'auto';

    /**
     * Updates the width or height for the current active device.
     *
     * @param {string} key - 'width' or 'height'.
     * @param {string} value - Value to set, including units.
     */
    const updateSize = ( key, value ) => {
        setImageSize({
            ...imageSize,
            [activeDevice]: {
                ...imageSize?.[activeDevice],
                [key]: value
            }
        });
    };

    return (
        <div className="ojb-image-size-controls">
            {/* Label and device switcher. */}
            <div className="ojb-label-wrap">
                <label className="components-base-control__label">{__( 'Image Size', 'journey-timeline-block' )}</label>
                <div className="ojb-responsive-tabs">
                    <DeviceSwitcher/>
                </div>
            </div>

            {/* Width and Height input fields. */}
            <div className="ojb-input-wrap">
                <div className="components-base-control">
                    <label className="components-base-control__label">{__( 'Width', 'journey-timeline-block' )}</label>
                    <UnitControl
                        value={widthValue}
                        onChange={( val ) => updateSize( 'width', val )}
                        units={[
                            { value: 'px', label: 'px' },
                            { value: '%', label: '%' }
                        ]}
                        placeholder="auto"
                    />
                </div>

                <div className="components-base-control">
                    <label className="components-base-control__label">{__( 'Height', 'journey-timeline-block' )}</label>
                    <UnitControl
                        value={heightValue}
                        onChange={( val ) => updateSize( 'height', val )}
                        units={[
                            { value: 'px', label: 'px' },
                            { value: '%', label: '%' }
                        ]}
                        placeholder="auto"
                    />
                </div>
            </div>
        </div>
    );
};

export default ImageSizeControls;