import { type FC } from 'react';

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

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

import { MatchFilter } from 'src/types/prode';
import { useLokaliseTranslation } from 'src/utils/i18n';

type FilterOption = { key: MatchFilter; label: string };

type MatchFilterChipsProps = {
  activeFilter: MatchFilter;
  onFilterChange: (filter: MatchFilter) => void;
  hasTournamentStarted?: boolean;
};

const MatchFilterChips: FC<MatchFilterChipsProps> = ({
  activeFilter,
  onFilterChange,
  hasTournamentStarted = false,
}) => {
  const { t } = useLokaliseTranslation('sportsPool');

  const filters: FilterOption[] = [
    { key: MatchFilter.Upcoming, label: t('matches.to_play') },
    ...(hasTournamentStarted
      ? [{ key: MatchFilter.Finished, label: t('matches.finished') }]
      : []),
    {
      key: MatchFilter.NeedsPrediction,
      label: t('matches.pending_prediction'),
    },
  ];

  const handleClick = (key: MatchFilter) => {
    onFilterChange(activeFilter === key ? MatchFilter.All : key);
  };

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 1,
        flexWrap: 'nowrap',
        overflowX: { xs: 'auto', md: 'visible' },
        WebkitOverflowScrolling: 'touch',
        scrollbarWidth: 'none',
        '&::-webkit-scrollbar': { display: 'none' },
      }}
    >
      {filters.map(filter => {
        const isSelected = activeFilter === filter.key;
        return (
          <HuChip
            key={filter.key}
            size="medium"
            label={filter.label}
            isSelected={isSelected}
            onClick={() => handleClick(filter.key)}
            aria-pressed={isSelected}
          />
        );
      })}
    </Stack>
  );
};

export default MatchFilterChips;
