import React, { useLayoutEffect, useRef } from 'react';
import { Box, DesignVersionProvider, Grid, GridItem } from '@nova-hf/ui';
import { ProgressBar } from 'frisco';
import { gsap } from 'gsap';
import { inject, observer } from 'mobx-react';
import { SignupSteps } from 'store/signupSteps';

import NowAndLaterDisplay from './nowAndLaterDisplay';

type LayoutWrapperProps = {
  image: string;
  children: React.ReactNode;
  signupSteps?: SignupSteps;
  hideNowAndLater?: boolean;
};
const LayoutWrapper = ({
  image,
  signupSteps,
  children,
  hideNowAndLater = false,
}: LayoutWrapperProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const curtainRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLImageElement | null>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const tl = gsap.timeline();

      tl.fromTo(
        curtainRef.current,
        { xPercent: 0 },
        { xPercent: -100, duration: 1, ease: 'power1.out' },
      );

      tl.fromTo(
        imageRef.current,
        { scale: 0.95 },
        {
          scale: 1,
          duration: 0.6,
          ease: 'power2.out',
        },
        '-=0.5',
      );

      tl.fromTo(
        imageRef.current,
        { opacity: 0 },
        {
          opacity: 1,
          duration: 1.2,
          ease: 'power1.out',
        },
        '-=0.6',
      );
      tl.fromTo(
        contentRef.current,
        { opacity: 0, y: 20 },
        { opacity: 1, y: 0, duration: 0.5, ease: 'power1.out' },
        '-=1.2',
      );
    }, containerRef);

    return () => ctx.revert();
  }, []);

  return (
    <DesignVersionProvider version="v2">
      <Box ref={containerRef} overflow="hidden">
        <Grid rowGap={[1, 2, 3]} columnGap={2} gridTemplate={2} style={{ maxWidth: 'none' }}>
          <GridItem gridColumn={{ lg: '1/1' }} hiddenOn={['sm', 'md']}>
            <Box
              backgroundColor="pink"
              boxShadow="coloredPink"
              style={{
                position: 'fixed',
                height: '100vh',
                width: '50vw',
                left: 0,
                opacity: 0.5,
                backgroundPosition: 'bottom center',
              }}
            />
            <Box
              alt="Farsimi cover"
              ref={imageRef}
              style={{
                background: `url(${image}?fm=webp)`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                position: 'fixed',
                height: '100vh',
                left: 0,
                right: '50%',
                backgroundPosition: 'right',
              }}
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span2', lg: '2/2' }}>
            <Box
              display="flex"
              ref={contentRef}
              width="100%"
              justifyContent="center"
              style={{ minHeight: '100vh' }}
            >
              <Box
                marginBottom={3}
                width={{ sm: '11/12', md: '9/12', xl: '9/12' }}
                style={{ maxWidth: '600px' }}
              >
                {children}
              </Box>
            </Box>
          </GridItem>
        </Grid>
        <Box
          ref={curtainRef}
          position="absolute"
          top={0}
          right={0}
          bottom={0}
          style={{ width: '100vw' }}
          background="pink"
          zIndex="megamenu"
        />
        {(signupSteps?.totalSteps ?? 0) > 0 && (
          <Box position="fixed" bottom={0} left={0} right={0}>
            <ProgressBar
              stepCount={signupSteps?.totalSteps || 0}
              currentStep={signupSteps?.currentStepIndex || 0}
              isSolid
            />
          </Box>
        )}
        {!hideNowAndLater && <NowAndLaterDisplay />}
      </Box>
    </DesignVersionProvider>
  );
};

export default inject('signupSteps')(observer(LayoutWrapper));