import { useState } from 'react';

import { type ChipProps } from '@material-hu/mui/Chip';

import HuPills from '@material-hu/components/design-system/Pills';
import { type PillsProps as HuPillsProps } from '@material-hu/components/design-system/Pills/types';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { type DaySummary, Incidence } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { TOOLTIP_DELAY } from '../../constants';

import IncidencePopover from './IncidencePopover';

type AugmentedIncidenceType = Incidence | 'MULTIPLE_INCIDENCES';

export type IncidencePillVariant = 'default' | 'deactivated';

// If HuPills had an export of HuHuPillsProps we could extend from that
type Props = {
  type: AugmentedIncidenceType;
  count: number | string;
  size?: ChipProps['size'];
  hideCount?: boolean;
  hasIcon?: boolean;
  pillProps?: HuPillsProps;
  disableTooltip?: boolean;
  withPopover?: boolean;
  daySummary?: DaySummary;
  visibleIncidences?: Incidence[];
  pillVariant?: IncidencePillVariant;
};

// Adding MULTIPLE_INCIDENCES to the possible selected types to show the popover when multiple incidences are grouped
const POPOVER_INCIDENCES = [Incidence.LATE, 'MULTIPLE_INCIDENCES'];

const HuIncidenceTag = (props: Props) => {
  const {
    type,
    count,
    hideCount = false,
    size = 'small',
    hasIcon = false,
    pillProps,
    disableTooltip = false,
    withPopover = false,
    daySummary,
    visibleIncidences,
    pillVariant = 'default',
  } = props;
  const [popoverAnchor, setPopoverAnchor] = useState<null | HTMLElement>(null);
  const { t } = useLokaliseTranslation('time_tracker');

  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
    setPopoverAnchor(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setPopoverAnchor(null);
  };

  const INCIDENCES_COLORS: Record<
    AugmentedIncidenceType,
    HuPillsProps['type']
  > = {
    [Incidence.ABSENT]: 'error',
    [Incidence.LATE]: 'warning',
    // UNDERWORKED and NOT_CLOCKED_IN are listed in NON_TAG_INCIDENCES and never rendered as pills;
    // these entries exist only to satisfy the exhaustive Record type.
    [Incidence.UNDERWORKED]: 'warning',
    [Incidence.LOCATION_INCIDENCE]: 'warning',
    [Incidence.AUTO_CLOSE]: 'warning',
    [Incidence.EXTRA_HOURS]: 'warning',
    [Incidence.FACIAL_RECOGNITION_SKIPPED]: 'warning',
    [Incidence.NOT_CLOCKED_IN]: 'warning',
    MULTIPLE_INCIDENCES: 'warning',
  };

  const pillType =
    pillVariant === 'deactivated' ? 'neutral' : INCIDENCES_COLORS[type];
  const chipLabel = !hideCount ? `${t(type)} (${count})` : t(type);
  const popoverEnabled = withPopover && POPOVER_INCIDENCES.includes(type);

  return (
    <>
      <HuTooltip
        description={t('INCIDENCE', { context: type })}
        direction="top"
        delay={TOOLTIP_DELAY}
        disableTooltip={disableTooltip}
      >
        <span>
          <HuPills
            type={pillType}
            label={chipLabel}
            size={size}
            hasIcon={hasIcon}
            onClick={popoverEnabled ? handlePopoverOpen : undefined}
            {...pillProps}
          />
        </span>
      </HuTooltip>
      {Boolean(popoverAnchor) && daySummary && (
        <IncidencePopover
          anchor={popoverAnchor}
          isOpen={Boolean(popoverAnchor)}
          closePopover={handlePopoverClose}
          type={type}
          daySummaryInfo={daySummary}
          incidences={visibleIncidences}
        />
      )}
    </>
  );
};

export default HuIncidenceTag;
