import FactCheckOutlined from '@material-hu/icons/material/FactCheckOutlined';
import InsertEmoticonOutlined from '@material-hu/icons/material/InsertEmoticonOutlined';
import ModeEditOutlineOutlined from '@material-hu/icons/material/ModeEditOutlineOutlined';
import StackedBarChartOutlined from '@material-hu/icons/material/StackedBarChartOutlined';
import Stack from '@material-hu/mui/Stack';

import IconRounded from 'src/pages/dashboard/Learning/Courses/components/IconRounded';
import MetricCard from 'src/pages/dashboard/Learning/Courses/components/MetricCard';
import { type ColabsMetrics as ColabsMetricsType } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CircularProgress from 'src/components/CircularProgress';

import { formatNumber } from '../utils';

export type ColabsMetricsProps = {
  metrics?: ColabsMetricsType;
  loading: boolean;
};

export const ColabsMetrics = ({ metrics, loading }: ColabsMetricsProps) => {
  const { t } = useLokaliseTranslation('learning');

  const metricCards = [
    {
      title: t('common.colaborators.assigned'),
      value: formatNumber(metrics?.totalEnrolledCourseUsers || 0),
      icon: (
        <IconRounded
          color="info"
          Icon={<InsertEmoticonOutlined />}
        />
      ),
    },
    {
      title: t('common.colaborators.in_progress'),
      value: formatNumber(metrics?.totalInProgressCourseUsers || 0),
      icon: (
        <IconRounded
          color="recommended"
          Icon={<ModeEditOutlineOutlined />}
        />
      ),
    },
    {
      title: t('common.colaborators.finished'),
      value: formatNumber(metrics?.totalFinishedCourseUsers || 0),
      icon: (
        <IconRounded
          color="success"
          Icon={<FactCheckOutlined />}
        />
      ),
    },
    {
      title: `${t('common.progress')} ${t('general:average').toLowerCase()}`,
      value: t('general:percent', {
        value: formatNumber(metrics?.averageProgress || 0),
      }),
      icon: (
        <IconRounded
          color="info"
          Icon={<StackedBarChartOutlined />}
        />
      ),
    },
  ];

  return (
    <>
      {loading && <CircularProgress centered />}
      {!loading && (
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
            gap: 4,
          }}
        >
          {metricCards.map(card => (
            <MetricCard
              key={card.title}
              title={card.title}
              value={card.value}
              icon={card.icon}
            />
          ))}
        </Stack>
      )}
    </>
  );
};

export default ColabsMetrics;