import type { AriaAttributes } from 'react';
import React from 'react';
import type { AriaButtonOptions } from 'react-aria';
import { useButton, useObjectRef } from 'react-aria';
import type { Node } from 'react-stately';
import classNames from 'classnames';

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

import type { SafeExtract, Size } from '../../../types';
import { forwardRef } from '../../../utils/forwardRef';
import type { CommonInputProps, PlaceholderProps } from '../types';

import type { MultiSelectState } from './hooks/useMultiSelectState';
import { dictionary, type MultiSelectTranslations } from './dictionary';

export interface MultiSelectInputProps<T extends object>
  extends
    Pick<CommonInputProps, 'error' | 'warning' | 'label'>,
    PlaceholderProps,
    AriaButtonOptions<'button'>,
    Pick<AriaAttributes, 'aria-autocomplete'>,
    Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'role'> {
  state: MultiSelectState<T>;
  width?: SafeExtract<Size, 'md' | 'lg'> | 'auto';
}

export const MultiSelectInput = forwardRef(function MultiSelectInput<T extends object>(
  {
    state,
    error,
    warning,
    width,
    placeholder,
    role,
    label,
    'aria-autocomplete': ariaAutocomplete,
    ...props
  }: MultiSelectInputProps<T>,
  forwardedRef: React.ForwardedRef<HTMLButtonElement>
) {
  const buttonRef = useObjectRef(forwardedRef);
  const { buttonProps } = useButton(props, buttonRef);

  const translations = useTranslations(dictionary);

  return (
    <button
      {...buttonProps}
      aria-label={label}
      ref={buttonRef}
      type='button'
      className={classNames('multiSelectField', {
        [`${width}`]: width !== 'auto',
        'error-field': error,
        'warning-field': warning && !error,
      })}
      role={role}
      aria-autocomplete={ariaAutocomplete}
    >
      <span
        className={classNames('multiSelectField__value', {
          'multiSelectField__value--muted': state.selectionManager.selectedKeys.size === 0,
        })}
      >
        {state.selectionManager.selectedKeys.size > 0
          ? getVisibleValue(state, translations)
          : (placeholder ?? translations.noOptionsSelected)}
      </span>
    </button>
  );
});

function getVisibleValue<T extends object>(state: MultiSelectState<T>, translations: MultiSelectTranslations) {
  const items = [...state.selectionManager.selectedKeys]
    .map(key => state.originalCollection.getItem(key))
    .filter((item): item is Node<T> => !!item);

  return items.length > 1 ? translations.multipleSelected(items.length) : items[0]?.textValue;
}