import React from 'react';
import type { AriaButtonOptions } from 'react-aria';
import { mergeProps, useButton, useFocusRing, useHover, useObjectRef } from 'react-aria';

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

import { forwardRef } from '../../../utils/forwardRef';
import { omit } from '../../../utils/omit';
import { DataList } from '../../DataList/DataList';
import { getDatalistItemProps } from '../../DataList/DataListItem';
import { Text } from '../../Typography/Text/Text';
import { getCheckboxProps } from '../Checkbox/Checkbox';
import type { CommonInputProps } from '../types';

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

interface MultiSelectToggleAllProps<T extends object>
  extends
    Pick<CommonInputProps, 'error' | 'warning'>,
    AriaButtonOptions<'button'>,
    Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex'>,
    React.PropsWithChildren {
  state: MultiSelectState<T>;
  mode: 'content' | 'dropdown' | undefined;
}

export const MultiSelectToggleAll = forwardRef(function MultiSelectToggleAll<T extends object>(
  { state, warning, error, children, mode, tabIndex, ...props }: MultiSelectToggleAllProps<T>,
  forwardedRef: React.ForwardedRef<HTMLButtonElement>
) {
  const ref = useObjectRef(forwardedRef);
  const translations = useTranslations(dictionary);

  const { buttonProps } = useButton({ ...props, preventFocusOnPress: true } as AriaButtonOptions<'button'>, ref);
  const { hoverProps, isHovered } = useHover({ ...props, isDisabled: mode === 'content' || props.isDisabled });
  const { focusProps, isFocused, isFocusVisible } = useFocusRing(props);

  const checkboxProps = omit(
    getCheckboxProps({
      label: translations.toggleAll,
      error,
      warning,
      checked: state.isFilteredSelectAll,
      disabled: props.isDisabled,
    }),
    'checked',
    'disabled',
    'type'
  );

  return (
    <DataList divider={false} dense={mode === 'content'} inset={mode === 'content'}>
      <button
        ref={ref}
        {...mergeProps(
          buttonProps,
          hoverProps,
          focusProps,
          getDatalistItemProps({ divider: true, className: 'multiSelectField__selectAll' })
        )}
        data-hovered={isHovered}
        data-focused={isFocused}
        data-focus-visible={isFocusVisible}
        tabIndex={tabIndex}
      >
        <DataList.Item.Cell grow={false} shrink={false} aria-hidden>
          <span {...checkboxProps} />
        </DataList.Item.Cell>
        <DataList.Item.Cell>
          <Text>{children}</Text>
        </DataList.Item.Cell>
      </button>
    </DataList>
  );
});