import {
  IconMoodCheck,
  IconMoodEdit,
  IconMoodHappy,
  IconRoute,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import { useGetCoursesMetrics } from 'src/pages/dashboard/Learning/Courses/hooks/useGetMetrics';
import { StatCard } from 'src/pages/dashboard/Learning/common/components/StatCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const CourseMetrics = () => {
  const { t } = useLokaliseTranslation('learning');
  const { data: metrics, isLoading: loadingMetrics } = useGetCoursesMetrics();

  const cards = [
    {
      title: t('course.total_courses'),
      value: metrics?.totalCreatedCourses?.toLocaleString() || '--',
      icon: IconRoute,
    },
    {
      title: t('common.colaborators.assigned'),
      value: metrics?.totalEnrolledCourseUsers?.toLocaleString() || '--',
      icon: IconMoodHappy,
    },
    {
      title: t('common.colaborators.in_progress'),
      value: metrics?.totalInProgressCourseUsers?.toLocaleString() || '--',
      icon: IconMoodEdit,
    },
    {
      title: t('common.colaborators.finished'),
      value: metrics?.totalFinishedCourseUsers?.toLocaleString() || '--',
      icon: IconMoodCheck,
    },
  ];

  return (
    <Stack
      sx={{
        display: 'grid',
        gap: 3,
        gridTemplateColumns: {
          xs: '1fr',
          md: 'repeat(2, 1fr)',
          lg: 'repeat(4, 1fr)',
        },
      }}
    >
      {cards.map(card => (
        <StatCard
          key={card.title}
          Icon={card.icon}
          loading={loadingMetrics}
          {...card}
        />
      ))}
    </Stack>
  );
};
