import React, { useRef } from 'react';
import { mergeProps, useHover, useOption } from 'react-aria';
import type { Node } from 'react-stately';

import { omit } from '../../../../utils/omit';
import { DataList } from '../../../DataList/DataList';
import { Text } from '../../../Typography/Text/Text';
import { getCheckboxProps } from '../../Checkbox/Checkbox';
import type { CommonInputProps } from '../../types';
import type { MultiSelectState } from '../hooks/useMultiSelectState';

interface MultiSelectOptionProps<T> extends Pick<CommonInputProps, 'error' | 'warning'> {
  item: Node<T>;
  state: MultiSelectState<T>;
  mode: 'content' | 'dropdown' | undefined;
}

export const MultiSelectOption = <T,>({ item, state, warning, error, mode, ...rest }: MultiSelectOptionProps<T>) => {
  const ref = useRef<HTMLDivElement>(null);
  const { optionProps, isDisabled, isSelected, isFocused, isFocusVisible } = useOption(
    {
      key: item.key,
    },
    state,
    ref
  );
  const { isHovered, hoverProps } = useHover({
    isDisabled: mode === 'content' || isDisabled,
  });

  const checkboxProps = omit(
    getCheckboxProps({
      label: typeof item.rendered === 'string' ? item.rendered : '',
      error,
      warning,
      checked: isSelected,
      disabled: isDisabled,
    }),
    'checked',
    'disabled',
    'type'
  );

  return (
    <DataList.Item
      {...rest}
      ref={ref}
      data-focused={!isDisabled && isFocused}
      data-focus-visible={!isDisabled && isFocusVisible}
      aria-disabled={isDisabled}
      data-disabled={isDisabled}
      data-hovered={isHovered}
      {...mergeProps(hoverProps, optionProps)}
    >
      <DataList.Item.Cell grow={false} shrink={false} aria-hidden>
        <span {...checkboxProps} />
      </DataList.Item.Cell>
      <DataList.Item.Cell>
        {typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered}
      </DataList.Item.Cell>
    </DataList.Item>
  );
};