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

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

import { StatCard } from '../../../common/components/StatCard';
import useGetPathsStats from '../../hooks/useGetPathsStats';

const PathsStats = () => {
  const { t } = useLokaliseTranslation('learning');

  const { data: stats, isLoading } = useGetPathsStats();

  const data = [
    {
      title: t('path.total'),
      value: stats?.totalCreatedPaths.toLocaleString() || '--',
      Icon: IconRoute,
    },
    {
      title: t('common.colaborators.assigned'),
      value: stats?.totalEnrolledPathUsers.toLocaleString() || '--',
      Icon: IconMoodHappy,
    },
    {
      title: t('common.colaborators.in_progress'),
      value: stats?.totalInProgressPathUsers.toLocaleString() || '--',
      Icon: IconMoodEdit,
    },
    {
      title: t('common.colaborators.finished'),
      value: stats?.totalFinishedPathUsers.toLocaleString() || '--',
      Icon: IconMoodCheck,
    },
  ];

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

export default PathsStats;
