import { Suspense } 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 { LearningFormSkeleton } from 'src/pages/dashboard/Learning/common/components/LearningFormSkeleton';
import { PathSteps } from 'src/pages/dashboard/Learning/Paths/constants';
import { useNewPathStepper } from 'src/pages/dashboard/Learning/Paths/hooks/useNewPathStepper';

import PathBasicInformation from './PathBasicInformation';
import PathConfiguration from './PathConfiguration';
import PathContent from './PathContent';
import PathRevision from './PathRevision';
import PathSegmentation from './PathSegmentation';

const STEP_CONTENT = {
  [PathSteps.BASIC_INFORMATION]: () => <PathBasicInformation />,
  [PathSteps.CONTENT]: () => <PathContent />,
  [PathSteps.CONFIGURATION]: () => <PathConfiguration />,
  [PathSteps.SEGMENTATION]: () => <PathSegmentation />,
  [PathSteps.REVISION]: () => <PathRevision />,
};

type PathNewMainProps = {
  loadingPath: boolean;
};

const PathNewMain = ({ loadingPath }: PathNewMainProps) => {
  const { steps, currentStep } = useNewPathStepper();
  const { palette } = useTheme();

  const Content = STEP_CONTENT[currentStep.id];

  return (
    <Stack
      component="section"
      sx={{
        pb: 4,
        overflowY: 'scroll',
        position: 'relative',
        height: '100%',
        backgroundColor: palette?.hugoBackground?.neutralBg,
      }}
    >
      <Stack
        sx={{
          backgroundColor: palette?.hugoBackground?.neutralBg,
          mx: 'auto',
          width: '100%',
          zIndex: 2,
          position: 'sticky',
          top: 0,
        }}
      >
        <Stepper
          steps={steps}
          currentStep={currentStep.value}
          sx={{
            py: 4,
            px: 3,
            maxWidth: 'md',
            mx: 'auto',
            width: '100%',
          }}
        />
      </Stack>

      <Container
        key={currentStep.value}
        maxWidth="md"
        sx={{
          animation: `${appearFromTop} 0.2s ease-in-out backwards`,
        }}
      >
        {loadingPath && <LearningFormSkeleton />}
        {!loadingPath && (
          <Stack sx={{ gap: 2 }}>
            <Suspense>
              <Content />
            </Suspense>
          </Stack>
        )}
      </Container>
    </Stack>
  );
};

export default PathNewMain;