import {
  BarElement,
  CategoryScale,
  Chart,
  LinearScale,
  Tooltip,
} from 'chart.js';
import { IconTrendingUp } from '@material-hu/icons/tabler';
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/performance/utils';
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 ReviewProgressProps = {
  total: number;
  statuses: { label: string; color: string; value: number }[];
};

const ReviewProgress = (props: ReviewProgressProps) => {
  const { total, statuses } = props;
  const { t } = useLokaliseTranslation('performance');

  const finishedCount = statuses[0]?.value ?? 0;

  return (
    <Stack
      sx={{
        border: theme => `1px solid ${theme.palette.divider}`,
        borderRadius: 2,
        p: 3,
        backgroundColor: 'background.paper',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 2,
          alignItems: 'center',
          width: '100%',
          minWidth: 0,
        }}
      >
        <Stack
          sx={{
            backgroundColor: 'new.background.layout.brand',
            borderRadius: '50%',
            justifyContent: 'center',
            alignItems: 'center',
            height: 60,
            width: 60,
            flexShrink: 0,
            color: theme =>
              (
                theme.palette as typeof theme.palette & {
                  new?: { text?: { neutral?: { brand?: string } } };
                }
              ).new?.text?.neutral?.brand ?? theme.palette.primary.main,
          }}
        >
          <IconTrendingUp
            size={36}
            color="currentColor"
            aria-hidden
          />
        </Stack>

        <Stack
          sx={{
            flex: 1,
            minWidth: 0,
            gap: 1,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: 2,
              width: '100%',
            }}
          >
            <HuTitle
              variant="M"
              title={t('cycle_review.total_reviews')}
              sx={{ flex: '1 1 auto', minWidth: 0 }}
            />
            <Typography
              variant="body2"
              color="text.secondary"
              sx={{
                flexShrink: 0,
                textAlign: { xs: 'left', sm: 'right' },
              }}
            >
              {t('cycle_review.total_answers_reviews', {
                finished: finishedCount,
                total,
              })}
            </Typography>
          </Stack>

          <Stack sx={{ width: '100%', minWidth: 0 }}>
            <SingleStackedBarChart
              data={statuses}
              showDataLabelPercentage={false}
              height={13}
            />
          </Stack>

          <Stack
            component="ul"
            sx={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              alignItems: 'center',
              width: '100%',
              gap: 0,
              pl: 0,
              m: 0,
              listStyle: 'none',
            }}
          >
            {statuses.map((item, index) => {
              const pct = getCompletionPercentage(item.value, total);
              return (
                <Stack
                  component="li"
                  key={item.label}
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    py: 0.5,
                    pl: index > 0 ? 2 : 0,
                    ml: index > 0 ? 2 : 0,
                    borderLeft:
                      index > 0
                        ? theme => `1px solid ${theme.palette.divider}`
                        : 'none',
                  }}
                >
                  <Stack
                    component="span"
                    sx={{
                      display: 'inline-flex',
                      width: 8,
                      height: 8,
                      borderRadius: '50%',
                      bgcolor: item.color,
                      flexShrink: 0,
                    }}
                  />
                  <Typography
                    component="span"
                    variant="body2"
                    color="text.secondary"
                    sx={{ ml: 1 }}
                  >
                    {item.label}
                    {' — '}
                    {t('cycle_review.assign_other', { count: item.value })}
                    {` ${pct}%`}
                  </Typography>
                </Stack>
              );
            })}
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default ReviewProgress;