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

import HuAlert from '@material-hu/components/design-system/Alert';
import Button from '@material-hu/components/design-system/Buttons/Button';

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

import ReviewNextStepButton from '../../../../components/ReviewNextStepButton';

type ReviewFormActionsProps = {
  currentStepQuestions:
    | ReviewDetailFormQuestions[]
    | ReviewDetailFormQuestionsGoalItem[];
  isFirstStep: boolean;
  isLastStep: boolean;
  canSubmit: boolean;
  reviewedFullName: string;
  onBack: () => void;
  onNext: () => void;
  onFinish: () => void;
};

const ReviewFormActions = ({
  currentStepQuestions,
  isFirstStep,
  isLastStep,
  canSubmit,
  reviewedFullName,
  onBack,
  onNext,
  onFinish,
}: ReviewFormActionsProps) => {
  const { t } = useLokaliseTranslation(['performance']);

  const hasRequiredQuestions = currentStepQuestions.some(item => item.required);

  return (
    <Stack
      sx={{
        width: '100%',
        gap: 2,
        alignItems: 'flex-end',
      }}
    >
      {hasRequiredQuestions && (
        <Typography
          variant="body2"
          sx={{ alignSelf: 'stretch', textAlign: 'left' }}
        >
          <Typography
            component="span"
            color="error"
          >
            {'* '}
          </Typography>
          {t('form.required_answer')}
        </Typography>
      )}
      {isLastStep && (
        <HuAlert
          severity="info"
          title={t('form.external_review.send_review_info', {
            name: reviewedFullName,
          })}
        />
      )}
      <Stack sx={{ flexDirection: 'row', gap: 2 }}>
        {!isFirstStep && (
          <Button
            onClick={onBack}
            variant="tertiary"
            size="large"
            startIcon={<IconArrowLeft />}
          >
            {t('general:back')}
          </Button>
        )}
        {isLastStep && (
          <Button
            onClick={onFinish}
            disabled={!canSubmit}
            variant="contained"
            color="primary"
            size="large"
          >
            {t('form.review.finish_review', { name: reviewedFullName })}
          </Button>
        )}
        {!isLastStep && (
          <ReviewNextStepButton
            currentStepQuestions={currentStepQuestions}
            onClick={onNext}
            label={t('general:next')}
          />
        )}
      </Stack>
    </Stack>
  );
};

export default ReviewFormActions;
