import { KeyboardEventHandler, MouseEventHandler, ReactNode, useCallback, useEffect, useRef } from 'react';

import { IconGlyph } from '../../../../../components/Icon/constants';
import { TextAutoTooltip } from '../../../../../components/Text/TextAutoTooltip';
import { useTranslation } from '../../../../../core/hooks/useTranslation';
import { useTestIdAttribute } from '../../../../../hooks/useTestIdAttribute';
import { TestIdProps } from '../../../../../types';
import { assertEmptyObject } from '../../../../../utils/assertEmptyObject';
import { makeTestId } from '../../../../../utils/makeTestId';

import { StyledItem, StyledRemoveButton, TunedIcon } from './styled';

export interface MultiSelectItemProps extends TestIdProps {
  autofocusRemoveButton: boolean;
  onRemoveClick: () => void;
  children: ReactNode;
  disabled?: boolean;
}

export function MultiSelectItem(props: MultiSelectItemProps) {
  const { onRemoveClick, autofocusRemoveButton, children, testId, disabled, ...rest } = props;
  assertEmptyObject(rest);

  const { t } = useTranslation();
  const testIdAttribute = useTestIdAttribute();

  const removeButtonRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (autofocusRemoveButton) {
      removeButtonRef.current?.focus();
    }
  }, [autofocusRemoveButton]);

  // We use onMouseUp because TriggerButton use onMouseUp instead onClick
  const handleItemMouseUp: MouseEventHandler = useCallback((event) => {
    event.stopPropagation();
  }, []);

  const handleRemoveClick: MouseEventHandler<HTMLDivElement> = useCallback(() => {
    // event.stopPropagation() will be call in handleItemMouseUp for whole item
    onRemoveClick();
  }, [onRemoveClick]);

  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
    (event) => {
      if (event.key === ' ' || event.key === 'Enter') {
        event.stopPropagation();

        onRemoveClick();
      }
    },
    [onRemoveClick],
  );

  return (
    <StyledItem onMouseUp={handleItemMouseUp} {...{ [testIdAttribute]: testId }}>
      <TextAutoTooltip {...{ [testIdAttribute]: makeTestId(testId, 'label') }}>{children}</TextAutoTooltip>
      {!disabled && (
        <StyledRemoveButton
          ref={removeButtonRef}
          aria-label={t('ui.select.removeMultiItem')}
          onClick={handleRemoveClick}
          onKeyDown={handleKeyDown}
          role="button"
          tabIndex={autofocusRemoveButton ? 1 : -1}
          {...{ [testIdAttribute]: makeTestId(testId, 'remove-button') }}
        >
          <TunedIcon glyph={IconGlyph.Close} />
        </StyledRemoveButton>
      )}
    </StyledItem>
  );
}