import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import CollapsibleGroupSelector from '@material-hu/components/composed-components/CollapsibleGroupSelector';
import { type Group } from '@material-hu/components/composed-components/CollapsibleGroupSelector/types';

import { useGetKudosCategories } from 'src/pages/dashboard/acknowledgements/hooks/useGetKudosCategories';
import { useGetKudosSegmentations } from 'src/pages/dashboard/acknowledgements/hooks/useGetKudosSegmentations';
import { getThinScrollbarStyles } from 'src/pages/dashboard/acknowledgements/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { RankingDateFilter } from './RankingDateFilter';

export const RankingFilterForm = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { palette } = useTheme();

  const { data: categories = [], isLoading: isLoadingCategories } =
    useGetKudosCategories();

  const { data: segmentations = [], isLoading: isLoadingSegmentations } =
    useGetKudosSegmentations();

  const categoryGroup: Group[] = [
    {
      name: t('general:category'),
      value: 'all_categories',
      items: categories.map(category => ({
        label: category.name,
        value: category.id.toString(),
      })),
    },
  ];

  const segmentationGroups: Group[] = segmentations.map(seg => ({
    name: seg.name,
    value: seg.id.toString(),
    items: seg.items.map(item => ({
      label: item.name,
      value: item.id.toString(),
    })),
  }));

  return (
    <Stack
      sx={{
        flex: 1,
        pr: 2,
        gap: 2,
        overflowAnchor: 'none',
        ...getThinScrollbarStyles(palette),
      }}
    >
      <RankingDateFilter />
      <CollapsibleGroupSelector
        isLoading={isLoadingCategories}
        fieldName="categories"
        groups={categoryGroup}
        withSearch
      />
      <CollapsibleGroupSelector
        isLoading={isLoadingSegmentations}
        fieldName="segmentationItemIds"
        groups={segmentationGroups}
        withSearch
      />
    </Stack>
  );
};
