import { type FC } from 'react';

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

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

import {
  ALL_CATEGORIES_ICON,
  CATEGORY_ICONS,
  DEFAULT_CATEGORY_ICON,
} from 'src/constants/serviceManagement';
import CategoryListItem from 'src/pages/dashboard/serviceManagement/servicePortal/serviceItems/components/Categories/CategoryListItem';
import { type Category } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type CategoriesProps = {
  categoriesData: Category[] | undefined;
  loading: boolean;
  onClickCategory: (category?: Category) => void;
  currentCategory: Category | null;
  allSelected: boolean;
};

const Categories: FC<CategoriesProps> = ({
  categoriesData,
  loading,
  onClickCategory,
  currentCategory,
  allSelected,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack
      sx={{
        height: 1,
        overflow: 'auto',
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        borderRight: ({ palette }) =>
          `1px solid ${palette.new.border.neutral.divider}`,
        px: 2,
        py: 3,
      }}
    >
      {loading && (
        <Stack sx={{ gap: 3 }}>
          <Skeleton sx={{ height: 35, width: '100%' }} />
          <Stack sx={{ gap: 1.5 }}>
            {Array.from({ length: 4 }).map((_, index) => (
              <Skeleton
                key={index}
                sx={{ height: 56, width: '100%' }}
              />
            ))}
          </Stack>
        </Stack>
      )}
      {!loading && (
        <Stack sx={{ gap: 1.5 }}>
          <Typography
            variant="globalM"
            fontWeight="fontWeightSemiBold"
          >
            {t('categories')}
          </Typography>
          <Stack sx={{ gap: 1.5 }}>
            <CategoryListItem
              name={t('all')}
              Icon={ALL_CATEGORIES_ICON}
              onClick={() => onClickCategory()}
              isActive={allSelected}
            />
            {categoriesData?.map(category => {
              const Icon =
                CATEGORY_ICONS[category.icon]?.Icon ?? DEFAULT_CATEGORY_ICON;
              return (
                <CategoryListItem
                  key={category.id}
                  name={category.name}
                  Icon={Icon}
                  onClick={() => onClickCategory(category)}
                  isActive={currentCategory?.id === category.id}
                />
              );
            })}
          </Stack>
        </Stack>
      )}
    </Stack>
  );
};

export default Categories;
