import { useMemo } from 'react';

import Stack from '@material-hu/mui/Stack';

import HuChips from '@material-hu/components/design-system/Chip';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { getJourneyFilterChips, getTaskFilterChips } from '../../constants';
import { useFilterParams } from '../../hooks/useFilterParams';

type ChipsListProps = {
  hidePillFilters?: boolean;
  isTasks?: boolean;
};

const ChipsList = ({
  hidePillFilters = false,
  isTasks = false,
}: ChipsListProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { filterParams, setQueryStates } = useFilterParams();

  const chipsList = useMemo(
    () => (isTasks ? getTaskFilterChips(t) : getJourneyFilterChips(t)),
    [isTasks, t],
  );

  const FILTER_KEY = isTasks ? 'expirationStatus' : 'progressStatus';

  const handleSelectChip = (value: string) => {
    const allChip = value === 'ALL';
    setQueryStates({ limit: null, [FILTER_KEY]: allChip ? null : value });
  };

  const isChipSelected = (value: string) => {
    const paramsValue = filterParams[FILTER_KEY];
    return !paramsValue ? value === 'ALL' : paramsValue === value;
  };

  if (hidePillFilters) return null;

  return (
    <Stack sx={{ flexDirection: 'row', gap: 0.5 }}>
      {chipsList.map(chip => (
        <HuChips
          key={chip.value}
          size="medium"
          label={chip.label}
          isSelected={isChipSelected(chip.value)}
          onClick={() => handleSelectChip(chip.value)}
          aria-pressed={isChipSelected(chip.value)}
        />
      ))}
    </Stack>
  );
};

export default ChipsList;
