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

import Button from '@material-hu/components/design-system/Buttons/Button';
import Chips from '@material-hu/components/design-system/Chip';
import Tooltip from '@material-hu/components/design-system/Tooltip';

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

import { MAX_CATEGORY_CHIP_NAME } from '../../constants';
import { useKudosCategoryFilter } from '../../hooks/useKudosCategoryFilter';
import { truncateCategoryName } from '../../utils/categoriesFilters';

export const KudosCategoryFilter = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const {
    isVisible,
    selectedCategoryId,
    visibleCategories,
    showSeeAll,
    handleSelectCategory,
    handleClearCategoryFilter,
    openCategoriesDrawer,
  } = useKudosCategoryFilter();

  if (!isVisible) return null;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        gap: 1,
      }}
    >
      <Chips
        label={t('category_chips.all')}
        isSelected={selectedCategoryId === null}
        onClick={handleClearCategoryFilter}
      />
      {visibleCategories.map(category => (
        <Tooltip
          key={category.id}
          title={category.name}
          disableTooltip={category.name.length <= MAX_CATEGORY_CHIP_NAME}
        >
          <span>
            <Chips
              label={truncateCategoryName(category.name)}
              isSelected={selectedCategoryId === category.id}
              onClick={() => handleSelectCategory(category)}
            />
          </span>
        </Tooltip>
      ))}
      {showSeeAll && (
        <Button
          size="small"
          variant="text"
          onClick={openCategoriesDrawer}
        >
          {t('general:see_more')}
        </Button>
      )}
    </Stack>
  );
};
