/**
 * @Move (SQPM)
 * Only used by the Performance module - move to Performance/
 */
import {
  BarElement,
  CategoryScale,
  Chart,
  LinearScale,
  Tooltip,
} from 'chart.js';
import Circle from '@material-hu/icons/material/Circle';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import SingleStackedBarChart from '@material-hu/components/composed-components/charts/SingleStackedBarChart';
import HuTitle from '@material-hu/components/design-system/Title';

import { getCompletionPercentage } from 'src/pages/dashboard/Forms/utils';
import { CycleProgressStage } from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

// TODO: Remove this Chart.register when material-hu is updated with the compiled fix
// Register minimum Chart.js components needed for SingleStackedBarChart
Chart.register(CategoryScale, LinearScale, BarElement, Tooltip);

type Props = {
  total: number;
  statuses: { label: string; color: string; value: number }[];
  type?: CycleProgressStage;
  title?: string | undefined;
};

const GREY = '#f0f0f0';

const ReviewProgress = ({
  total,
  statuses,
  type = CycleProgressStage.REVIEWS,
  title,
}: Props) => {
  const { t } = useLokaliseTranslation(['backoffice_only']);

  return (
    <Stack
      sx={{
        border: `1px solid ${GREY}`,
        borderRadius: 2,
        minHeight: 25,
        p: 3,
        m: 3,
      }}
    >
      {total > 0 && (
        <>
          <HuTitle
            title={
              title ||
              t('backoffice_only:review_progress.progress', { context: type })
            }
            variant="L"
            sx={{ mb: 3 }}
          />
          <Stack
            sx={{
              alignItems: 'center',
              textAlign: 'left',
              gap: 3,
              width: 1,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <Stack
              sx={{
                width: { xs: '100%', md: '50%' },
                flexBasis: { xs: '100%', md: '50%' },
                minWidth: 0,
                ml: 1,
                mb: 1,
                gap: 0.5,
              }}
            >
              <Typography
                variant="body2"
                sx={{ pl: 0.5 }}
              >
                {t('backoffice_only:review_progress.total_answers', {
                  context: type,
                  finished: statuses[0].value,
                  total,
                })}
              </Typography>
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1,
                  width: '100%',
                  minWidth: 0,
                }}
              >
                <SingleStackedBarChart
                  data={statuses}
                  showDataLabelPercentage
                  height={13}
                  sx={{ width: '100%', minWidth: 0 }}
                />
                <Typography
                  variant="body2"
                  color="text.secondary"
                >
                  {getCompletionPercentage(statuses[0].value, total)}%
                </Typography>
              </Stack>
            </Stack>
            <Stack
              sx={{
                alignContent: 'right',
                gap: 1,
                alignItems: 'right',
                width: { xs: '100%', md: '50%' },
                flexBasis: { xs: '100%', md: '50%' },
                flexShrink: 0,
              }}
            >
              {statuses.map(value => (
                <Stack
                  direction="row"
                  alignItems="center"
                  justifyContent="space-between"
                  spacing={0}
                  key={value.label}
                >
                  <Stack
                    direction="row"
                    spacing={1}
                  >
                    <Circle sx={{ color: value.color }} />
                    <Typography variant="body2">{value.label}</Typography>
                  </Stack>
                  <Stack
                    direction="row"
                    spacing={1}
                  >
                    <Typography variant="body2">
                      {t(
                        type !== CycleProgressStage.SELECTION
                          ? 'backoffice_only:review_progress.reviews'
                          : 'backoffice_only:review_progress.reviewed',
                        { count: value.value },
                      )}
                    </Typography>
                    <Typography
                      variant="h6"
                      textAlign="center"
                      width={40}
                    >
                      {getCompletionPercentage(value.value, total)}%
                    </Typography>
                  </Stack>
                </Stack>
              ))}
            </Stack>
          </Stack>
        </>
      )}
      {total === 0 && (
        <Stack
          justifyContent="center"
          alignItems="center"
          textAlign="center"
          py={5}
        >
          <Typography variant="h6">
            {t('backoffice_only:review_progress.empty_progress', {
              context: type,
            })}
          </Typography>
          <Typography
            variant="body1"
            color="textSecondary"
            mt={1}
          >
            {t('backoffice_only:review_progress.empty_progress_sub', {
              context: type,
            })}
          </Typography>
        </Stack>
      )}
    </Stack>
  );
};

export default ReviewProgress;