import { memo, useMemo } from 'react';

import { isNil } from 'lodash-es';
import { useTheme } from '@material-hu/mui/styles';

import { type LeaderProgressBlockProps } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ReviewProgress from 'src/components/dashboard/performance/ReviewProgress';

import LeaderProgressBlockSkeleton from './LeaderProgressBlockSkeleton';

const LeaderProgressBlock = ({
  stats,
  isLoading,
}: LeaderProgressBlockProps) => {
  const { t } = useLokaliseTranslation('performance');
  const theme = useTheme();

  const statusBreakdown = stats?.statusBreakdown;

  const { statuses, total } = useMemo(() => {
    if (isNil(statusBreakdown)) {
      return { statuses: [], total: 0 };
    }
    const items = [
      {
        label: t('manage_team.status.finished'),
        color: theme.palette.newBase?.brand[900] ?? theme.palette.primary.main,
        value: statusBreakdown.finished,
      },
      {
        label: t('manage_team.status.in_progress'),
        color: theme.palette.newBase?.brand[200] ?? theme.palette.primary.light,
        value: statusBreakdown.inProgress,
      },
      {
        label: t('manage_team.status.pending'),
        color: theme.palette.grey[200],
        value: statusBreakdown.pending,
      },
    ];
    return {
      statuses: items,
      total: items.reduce((sum, s) => sum + s.value, 0),
    };
  }, [t, theme, statusBreakdown]);

  if (isLoading || isNil(stats)) {
    return <LeaderProgressBlockSkeleton />;
  }
  if (isNil(statusBreakdown) || total === 0) {
    return null;
  }

  return (
    <ReviewProgress
      total={total}
      statuses={statuses}
    />
  );
};

export default memo(LeaderProgressBlock);
