import { FC, useState } from 'react';
import { useFormContext } from 'react-hook-form';

import { useNavigate } from 'react-router-dom';

import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';

import HuStepper from '@material-hu/components/design-system/Stepper';
import HuTitle from '@material-hu/components/design-system/Title';

import { UsePostingReturn } from 'src/hooks/usePosting';

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

import { NewPostDraftSteps, newPostDraftSteps } from '../../constants';
import { draftsForReviewRoutes } from '../../routes';
import FinalAuthor from '../DraftSteps/FinalAuthor';
import PostDraft from '../DraftSteps/PostDraft';
import Target from '../DraftSteps/Target';

import DraftStepperLayout, { CONTAINER_MAX } from './DraftStepperLayout';

type DraftStepperProps = {
  usePostingProps: Omit<UsePostingReturn, 'form' | 'handleSubmit' | 'submit'>;
  onSubmit?: () => void;
};

const DraftStepper: FC<DraftStepperProps> = props => {
  const { usePostingProps, onSubmit } = props;
  const [currentStep, setCurrentStep] = useState<NewPostDraftSteps>(
    NewPostDraftSteps.FINAL_AUTHOR,
  );

  const navigate = useNavigate();
  const { t } = useLokaliseTranslation(['communication', 'drafts']);

  const { watch } = useFormContext();
  const { permissionId, toFeed, groupId } = watch();

  return (
    <>
      <Stack sx={{ alignItems: 'center', pt: 4 }}>
        <Box
          sx={{
            maxWidth: `${CONTAINER_MAX}px`,
            width: '100%',
          }}
        >
          <HuStepper
            steps={newPostDraftSteps.map(step => ({
              ...step,
              title: t(`communication:drafts_for_review.${step.title}`),
            }))}
            currentStep={newPostDraftSteps.findIndex(
              item => item.id === currentStep,
            )}
          />
        </Box>
      </Stack>
      {currentStep === NewPostDraftSteps.FINAL_AUTHOR && (
        <DraftStepperLayout
          primaryButtonProps={{
            onClick: () => setCurrentStep(NewPostDraftSteps.TARGET),
            disabled: permissionId === null,
          }}
          secondaryButtonProps={{
            onClick: () => navigate(draftsForReviewRoutes.drafts()),
          }}
        >
          <FinalAuthor />
        </DraftStepperLayout>
      )}
      {currentStep === NewPostDraftSteps.TARGET && (
        <DraftStepperLayout
          primaryButtonProps={{
            onClick: () => setCurrentStep(NewPostDraftSteps.POST),
            disabled: toFeed === false && groupId === null,
          }}
          secondaryButtonProps={{
            onClick: () => setCurrentStep(NewPostDraftSteps.FINAL_AUTHOR),
          }}
        >
          <Target />
        </DraftStepperLayout>
      )}
      {currentStep === NewPostDraftSteps.POST && (
        <DraftStepperLayout
          primaryButtonProps={{
            onClick: onSubmit,
            text: t('drafts:steps.post.send_for_approval'),
            disabled: usePostingProps.disabledSubmitButton,
            isLoading: usePostingProps.isSubmitting,
          }}
          secondaryButtonProps={{
            onClick: () => setCurrentStep(NewPostDraftSteps.TARGET),
          }}
        >
          <Stack sx={{ gap: 3 }}>
            <HuTitle
              title={t('communication:drafts_for_review.title_post')}
              variant="S"
              sx={{ gap: 2 }}
            />
            <PostDraft usePostingProps={usePostingProps} />
          </Stack>
        </DraftStepperLayout>
      )}
    </>
  );
};

export default DraftStepper;
