import { type FC, Fragment } from 'react';

import { IconMapPinExclamation } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type SxProps } from '@material-hu/mui/styles';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

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

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

import HuIncidenceTag from './IncidenceTag';

type Props = {
  daySummary: DaySummary;
  groupWarningIncidences?: boolean;
  incidenceTags: Incidence[];
  containerSx?: SxProps;
  isDeactivated?: boolean;
};

const IncidenceSummary: FC<Props> = props => {
  const {
    containerSx,
    groupWarningIncidences = true,
    daySummary,
    incidenceTags = [],
    isDeactivated = false,
  } = props;
  const pillVariant = isDeactivated ? 'deactivated' : 'default';
  const { t } = useLokaliseTranslation('time_tracker');

  const visibleIncidences = parseIncidences(incidenceTags, true);

  const incidencesCount = visibleIncidences.length;
  const multipleIncidences = groupWarningIncidences && incidencesCount >= 2;

  return (
    <Stack sx={containerSx}>
      {multipleIncidences && (
        <HuIncidenceTag
          type="MULTIPLE_INCIDENCES"
          count={incidencesCount}
          pillProps={{
            label: `${t(`INCIDENCES`)} (${incidencesCount})`,
            hasIcon: true,
          }}
          daySummary={daySummary}
          visibleIncidences={visibleIncidences}
          withPopover
          disableTooltip // Don't need to show the tooltip for grouped incidences
          pillVariant={pillVariant}
        />
      )}
      {!multipleIncidences &&
        visibleIncidences.map(incidence => (
          <Fragment key={incidence}>
            {incidence === Incidence.LOCATION_INCIDENCE ? (
              <HuTooltip
                title={t('LOCATION_INCIDENCE_TOOLTIP')}
                description={t('CHECK_LOCATION')}
                direction="top"
                delay={TOOLTIP_DELAY}
              >
                <span>
                  <HuAvatar
                    size="small"
                    Icon={IconMapPinExclamation}
                    color="warning"
                  />
                </span>
              </HuTooltip>
            ) : (
              <HuIncidenceTag
                type={incidence}
                count={t(`INCIDENCE_${incidence}`)}
                pillProps={{
                  hasIcon: true,
                  label: t(incidence),
                }}
                daySummary={daySummary}
                visibleIncidences={visibleIncidences}
                withPopover
                hideCount
                pillVariant={pillVariant}
              />
            )}
          </Fragment>
        ))}
    </Stack>
  );
};

export default IncidenceSummary;