import type { RefAttributes } from 'react';
import React, { useState } from 'react';
import { useObjectRef, VisuallyHidden } from 'react-aria';
import classNames from 'classnames';

import { useTranslations } from '@shoptet/ui-core-web';

import type { Size } from '../../../types';
import { dictionary } from '../NumberInput/dictionary';
import { NumberInput } from '../NumberInput/NumberInput';
import type { CommonInputProps } from '../types';

export interface CounterInputProps
  extends RefAttributes<HTMLInputElement>, Omit<CommonInputProps<number | null>, 'value' | 'defaultValue' | 'loading'> {
  /**
   * The controlled value of the counter input.
   */
  value?: number | null;
  /**
   * The uncontrolled default value of the counter input.
   */
  defaultValue?: number | null;
  /**
   * Minimum allowed value.
   */
  min?: number | string;
  /**
   * Maximum allowed value.
   */
  max?: number | string;
  /**
   * Step value for increment/decrement.
   * @default 1
   */
  step?: number;
  /**
   * Width of the number input.
   * @default 'xs'
   */
  width?: Extract<Size, 'xs' | 'sm' | 'md'>;
}

export const CounterInput = ({
  value,
  defaultValue,
  min,
  max,
  step = 1,
  width = 'xs',
  disabled,
  error,
  warning,
  onChange,
  onBlur,
  onFocus,
  label,
  ref: forwardedRef,
  ...props
}: CounterInputProps) => {
  const inputRef = useObjectRef(forwardedRef);
  const translations = useTranslations(dictionary);
  const [announcement, setAnnouncement] = useState('');

  const handleChange = (next: number | null, event?: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(next, event);
    if (event === undefined && typeof next === 'number') {
      setAnnouncement(translations.currentValueIs(label, next));
    }
  };

  return (
    <NumberInput
      value={value}
      defaultValue={defaultValue}
      min={min}
      max={max}
      step={step}
      disabled={disabled}
      onChange={handleChange}
      onBlur={onBlur}
      onFocus={onFocus}
    >
      <span className='counterInput'>
        <span
          className={classNames('counterInput__control', {
            'counterInput__control--error': error,
            'counterInput__control--warning': warning && !error,
            'counterInput__control--disabled': disabled,
          })}
        >
          <NumberInput.DecrementButton label={label} />
          <NumberInput.Input {...props} ref={inputRef} label={label} width={width} error={error} warning={warning} />
          <NumberInput.IncrementButton label={label} />
        </span>
        <VisuallyHidden>
          <span aria-live='assertive'>{announcement}</span>
        </VisuallyHidden>
      </span>
    </NumberInput>
  );
};

CounterInput.displayName = 'CounterInput';