import { type FC } from 'react';

import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

import { appearFromTop } from 'src/constants/animation';
import { useCertificateCreateSteps } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/contexts/CertificateCreateStepsContext';

import BasicInformationStep from './BasicInformationStep';
import DesignStep from './DesignStep';
import RevisionStep from './RevisionStep';
import TemplateStep from './TemplateStep';

const STEP_COMPONENTS: FC[] = [
  TemplateStep,
  BasicInformationStep,
  DesignStep,
  RevisionStep,
];

const CertificatesCreateContent = () => {
  const { steps, activeStep } = useCertificateCreateSteps();
  const { palette } = useTheme();

  const StepComponent = STEP_COMPONENTS[activeStep];

  return (
    <Stack
      component="section"
      sx={{
        flex: 1,
        py: 4,
        backgroundColor: palette.new.background.layout.default,
      }}
    >
      <Container maxWidth="lg">
        <Stepper
          steps={steps}
          currentStep={activeStep}
          sx={{ mb: 3, width: '100%' }}
        />
        <Stack
          key={activeStep}
          sx={{
            animation: `${appearFromTop} 0.2s ease-in-out backwards`,
            gap: 2,
            pb: 2,
            alignItems: 'center',
          }}
        >
          {StepComponent && <StepComponent />}
        </Stack>
      </Container>
    </Stack>
  );
};

export default CertificatesCreateContent;
