import { TFunction, Trans } from 'react-i18next';

import { IconStar } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { JourneyStep } from '../../types';

type StepHeaderInfoProps = Pick<
  JourneyStep,
  'title' | 'totalTasks' | 'completedTasks'
> & {
  isLoading: boolean;
};

export const StepHeaderInfo = ({
  title,
  totalTasks,
  completedTasks,
  isLoading,
}: StepHeaderInfoProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { palette } = useTheme();
  const isCompleted = completedTasks === totalTasks;
  const remainingTasks = totalTasks - completedTasks;

  return (
    <HuCardContainer fullWidth>
      {isLoading && (
        <Stack sx={{ gap: 0.5 }}>
          <HuSkeleton sx={{ width: '100%', height: 32 }} />
          <HuSkeleton sx={{ width: '20%', height: 32 }} />
        </Stack>
      )}
      {!isLoading && (
        <Stack
          sx={{
            gap: 2,
            flexDirection: 'row',
            width: '100%',
            alignItems: 'center',
          }}
        >
          <HuProgressBar
            sx={{ width: '100%' }}
            current={completedTasks}
            total={totalTasks}
            variant="determinate"
            description={t('journey_steps.description')}
            title={title}
            helper={
              isCompleted ? (
                t('tasks.onboarding_module.completed')
              ) : (
                <Typography variant="globalXXS">
                  <Trans
                    t={t as TFunction}
                    i18nKey="employee_lifecycle:tasks.onboarding_module.remaining"
                    values={{
                      tasks: t('tasks.total', { count: remainingTasks }),
                    }}
                    components={{ strong: <strong /> }}
                  />
                </Typography>
              )
            }
          />
          <HuAvatar
            Icon={IconStar}
            color="primary"
            sx={{
              mt: 4,
              '& svg': {
                fill: isCompleted ? palette.primary.main : undefined,
                stroke: isCompleted ? palette.primary.main : undefined,
              },
            }}
          />
        </Stack>
      )}
    </HuCardContainer>
  );
};