import SubSidebar from '@material-hu/components/composed-components/SubSidebar';

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

import { useGetCategories } from '../../hooks/useGetCategories';
import { type CategoryFilterItem, type CourseCategory } from '../../types';

type CourseCategoryFilterProps = {
  value: string;
  onChange: (value: string) => void;
};

const CourseCategoryFilter = ({
  value,
  onChange,
}: CourseCategoryFilterProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { data: categoriesData, isLoading: isLoadingCategories } =
    useGetCategories();

  const mapCategory = (category: CourseCategory): CategoryFilterItem => ({
    value: `${category.id}`,
    text: {
      title: category.name,
      withEllipsis: true,
      overflow: 'tooltip' as const,
    },
    items: category.children?.map(mapCategory),
  });

  const sections = [
    {
      value: 'categories',
      title: t('common.category_other'),
      items: isLoadingCategories
        ? Array.from({ length: 4 }, (_, index) => ({
            value: index,
            loading: true,
          }))
        : (categoriesData ?? []).map(mapCategory),
    },
  ];

  return (
    <SubSidebar
      value={value}
      onChange={(newValue: number | string) => onChange(newValue as string)}
      sections={sections}
      sx={{
        '#subSidebar-section-categories > div:first-of-type': {
          mt: 1,
        },
        '.side-content-container': {
          width: '24px',
          height: '24px',
        },
        '.side-content-container > .open-action': {
          opacity: 1,
        },
      }}
    />
  );
};

export default CourseCategoryFilter;
