// Import necessary WordPress modules.
const { __ } = wp.i18n;
const { RangeControl, SelectControl} = wp.components;

// Import custom components and context.
import DeviceSwitcher from './DeviceSwitcher';
import { useDevice } from './DeviceContext';
import { getRangeLimitsByUnitForFont } from '../block/helpers';

/**
 * FontSizeControl Component.
 *
 * This component provides a device-specific font size control using a range slider,
 * and allows users to select units (px, %, em, rem) for the desktop view only.
 * It uses context to track the active device (desktop, tablet, mobile) and stores values per device.
 *
 * Props:
 * @param {string} label - Label text for the control (default: "Font Size").
 * @param {object} fontSize - Object containing font sizes per device { desktop, tablet, mobile }.
 * @param {function} setFontSize - Function to update the font size object.
 * @param {string} fontSizeUnit - Currently selected font size unit (applies only to desktop).
 * @param {function} setFontSizeUnit - Function to update the font size unit.
 * @param {array} allowedUnits - List of allowed font size units (default: ['px', '%', 'em', 'rem']).
 */
const FontSizeControl = ({
  label = __( 'Font Size', 'journey-timeline-block' ),
  fontSize,
  setFontSize,
  fontSizeUnit,
  setFontSizeUnit,
  allowedUnits = [ 'px', '%', 'em', 'rem' ]
}) => {

  // Access the active device context (desktop, tablet, mobile).
  const { activeDevice, setActiveDevice } = useDevice();

  // Create options for the unit dropdown.
  const fontSizeUnits = allowedUnits.map( ( unit ) => ({
    label: unit,
    value: unit
  }) );

  /**
   * Handle font size value change for the active device.
   */
  const handleChange = ( value ) => {
    setFontSize({
      ...fontSize,
      [activeDevice]: value
    });
  };

  /**
   * Handle font size unit change — only applies when desktop is active.
   */
  const handleUnitChange = ( unit ) => {
    if ( 'desktop' === activeDevice ) {
      setFontSizeUnit( unit );
    }
  };

  // Get min and max values for range slider based on selected unit.
  const { min, max } = getRangeLimitsByUnitForFont( fontSizeUnit );
  return (
    <>
      {/* Label and Unit Selector. */}
      <div className="ojb-label-wrap">
        <label className="components-base-control__label">{label}</label>

        {/* Unit dropdown (enabled only for desktop). */}
        <SelectControl
          className="sel_unit"
          value={fontSizeUnit}
          options={fontSizeUnits}
          onChange={handleUnitChange}
          disabled={'desktop' !== activeDevice}
        />

        {/* Device switcher tab (desktop / tablet / mobile). */}
        <div className="ojb-responsive-tabs">
          <DeviceSwitcher/>
        </div>
      </div>

      {/* Range Slider for current device's font size.  */}
      <div className="ojb-input-wrap">
        <RangeControl
          className="ojb-input-range"
          value={fontSize?.[activeDevice] || ''}
          onChange={handleChange}
          min={min}
          max={max}
        />
      </div>
    </>
  );
};

export default FontSizeControl;