import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';

import FactCheckOutlined from '@material-hu/icons/material/FactCheckOutlined';
import InsertEmoticonOutlined from '@material-hu/icons/material/InsertEmoticonOutlined';
import ThumbUpOutlined from '@material-hu/icons/material/ThumbUpOutlined';
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 { coursesKeys } from 'src/pages/dashboard/Learning/Courses/queries';
import { getSurveysMetrics } from 'src/pages/dashboard/Learning/Courses/services';
import { SurveyQuestions } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ChartCard from 'src/components/ChartCard';
import NumberRatingChart from 'src/components/Charts/NumberRatingChart';
import CircularProgress from 'src/components/CircularProgress';

import {
  formatNumber,
  getRatingMetrics,
  getRecommendationMetrics,
} from '../utils';

export const SurveysMetrics = () => {
  const { id } = useParams();
  const courseId = Number(id) || 0;
  const { t } = useLokaliseTranslation('learning');

  const { data: metrics, isLoading } = useQuery(
    coursesKeys.detail.reports.surveys.metrics(courseId),
    () => getSurveysMetrics(courseId),
    {
      select: response => response.data,
      enabled: !!id,
    },
  );

  const recommended = getRecommendationMetrics(metrics);

  const contentMetrics = getRatingMetrics(
    metrics,
    SurveyQuestions.CONTENT_RATING,
  );

  const experienceMetrics = getRatingMetrics(
    metrics,
    SurveyQuestions.EXPERIENCE_RATING,
  );

  const metricCards = [
    {
      title: t('common.colaborators.assigned'),
      value: formatNumber(metrics?.totalFinished),
      icon: (
        <IconRounded
          color="info"
          Icon={<InsertEmoticonOutlined />}
        />
      ),
    },
    {
      title: t('general:total_answers'),
      value: formatNumber(metrics?.totalSurveyCompleted),
      icon: (
        <IconRounded
          color="success"
          Icon={<FactCheckOutlined />}
        />
      ),
    },
    {
      title: t('reports.recommend_course'),
      value: formatNumber(recommended),
      icon: (
        <IconRounded
          color="recommended"
          Icon={<ThumbUpOutlined />}
        />
      ),
    },
  ];

  const chartCards = [
    {
      title: t('reports.survey.content_rating.label'),
      subtitle: t('reports.survey.chart_description'),
      data: contentMetrics.map((value, index) => ({
        value,
        label: t(`reports.survey.content_rating.values.${index + 1}`),
      })),
    },
    {
      title: t('reports.survey.experience_rating.label'),
      subtitle: t('reports.survey.chart_description'),
      data: experienceMetrics.map((value, index) => ({
        value,
        label: t(`reports.survey.experience_rating.values.${index + 1}`),
      })),
    },
  ];

  return (
    <>
      {isLoading && <CircularProgress centered />}
      {!isLoading && (
        <>
          <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>
          <Stack sx={{ gap: 4, flexDirection: 'row' }}>
            {chartCards.map(card => (
              <ChartCard
                key={card.title}
                title={card.title}
                subtitle={card.subtitle}
              >
                <NumberRatingChart data={card.data} />
              </ChartCard>
            ))}
          </Stack>
        </>
      )}
    </>
  );
};

export default SurveysMetrics;