'use client';
import clsx from 'clsx';
import { useEffect, useState, } from 'react';
import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
import { formatTime, padTimeValue, parseTime, } from '../../../utils/time';
const hoursLimit = {
    min: 1,
    max: 12,
};
const minuteValues = [0, 30];
/**
 * TimePicker component that allows selecting only hour and half-hour slots.
 *
 * @component
 * @example
 * // Example usage of TimePicker component
 * <TimePicker
 *   defaultValue="08:30 AM"
 *   onTimeChange={(time) => console.log(time)}
 * />
 *
 * @param {TimePickerProps} props - The properties of the TimePicker component.
 * @param {string} [props.value] - Controlled time value in `hh:mm AM/PM` format.
 * @param {string} [props.defaultValue] - Initial uncontrolled value in `hh:mm AM/PM` format.
 * @param {boolean} [props.disabled=false] - Whether the control is disabled.
 * @param {(time: string) => void} [props.onTimeChange] - Callback fired when the selected time changes.
 * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the wrapper.
 *
 * @returns {ReactNode} The rendered TimePicker component.
 */
export function TimePicker({ value, defaultValue, disabled = false, onTimeChange, ...restProps }) {
    const [time, setTime] = useState(() => parseTime(value || defaultValue));
    useEffect(() => {
        if (!value)
            return;
        setTime(parseTime(value));
    }, [value]);
    const updateTime = (nextState) => {
        setTime(nextState);
        onTimeChange?.(formatTime(nextState));
    };
    const updateHour = (step) => {
        const nextHour = time.hour + step;
        if (nextHour > hoursLimit.max) {
            return updateTime({ ...time, hour: hoursLimit.min });
        }
        if (nextHour < hoursLimit.min) {
            return updateTime({ ...time, hour: hoursLimit.max });
        }
        return updateTime({ ...time, hour: nextHour });
    };
    const updateMinute = (step) => {
        const currentIndex = minuteValues.indexOf(time.minute);
        const nextIndex = (currentIndex + step + minuteValues.length) % minuteValues.length;
        return updateTime({ ...time, minute: minuteValues[nextIndex] });
    };
    return (<div {...restProps} className={clsx('border-info bg-info-2 inline-flex items-center justify-center rounded-xl border px-5 py-3', disabled && 'border-gray-3', restProps.className)}>
      <TimeValue value={padTimeValue(time.hour)} disabled={disabled} onIncrement={() => updateHour(1)} onDecrement={() => updateHour(-1)}/>
      <span className="text-info-dark-3 px-2 text-4xl leading-none font-bold">
        :
      </span>
      <TimeValue value={padTimeValue(time.minute)} disabled={disabled} onIncrement={() => updateMinute(1)} onDecrement={() => updateMinute(-1)}/>
      <div className="ml-2 flex flex-col gap-y-1 overflow-hidden">
        <PeriodButton period="AM" currentPeriod={time.period} disabled={disabled} onClick={() => updateTime({ ...time, period: 'AM' })}/>
        <PeriodButton period="PM" currentPeriod={time.period} disabled={disabled} onClick={() => updateTime({ ...time, period: 'PM' })}/>
      </div>
    </div>);
}
function TimeValue({ value, disabled, onIncrement, onDecrement, }) {
    return (<div className="inline-flex items-center">
      <span className={clsx('text-info-dark-3 text-5xl leading-none font-bold tabular-nums', disabled && 'text-gray-3')}>
        {value}
      </span>
      <div className="ml-1 inline-flex flex-col">
        <button type="button" aria-label={`Increment ${value}`} onClick={onIncrement} disabled={disabled} className={clsx('inline-flex cursor-pointer items-center justify-center leading-none', 'not-disabled:hover:text-info-dark-3', 'disabled:text-gray-3 disabled:cursor-not-allowed')}>
          <MdKeyboardArrowUp size={24}/>
        </button>
        <button type="button" aria-label={`Decrement ${value}`} onClick={onDecrement} disabled={disabled} className={clsx('text-dark inline-flex cursor-pointer items-center justify-center text-sm leading-none transition-colors', 'not-disabled:hover:text-info-dark-3', 'disabled:text-gray-3 disabled:cursor-not-allowed')}>
          <MdKeyboardArrowDown size={24}/>
        </button>
      </div>
    </div>);
}
function PeriodButton({ period, currentPeriod, disabled, onClick, }) {
    return (<button type="button" onClick={onClick} disabled={disabled} className={clsx('flex h-6 w-8 items-center justify-center rounded-md text-xs font-semibold transition-colors', period === currentPeriod
            ? 'bg-info text-white'
            : 'text-gray-1 not-disabled:hover:bg-gray-6 bg-white', disabled && 'text-gray-3 cursor-not-allowed')}>
      {period}
    </button>);
}
//# sourceMappingURL=TimePicker.jsx.map