import { Box, Grid, Typography, Paper, Stack } from '@mui/material'
import { useEffect, useRef, useState, useCallback} from 'react'
import { useCustomTheme } from '@/themes/useCustomTheme'
import Image from 'next/image';

function getSectionScrollPercentage(ref: any) {
  const section = ref.current;
  const sectionHeight = section.offsetHeight;
  const windowHeight = window.innerHeight;
  const scrollDistance = Math.max(0, sectionHeight - (windowHeight + window.scrollY - section.offsetTop));
  const scrollPercentage = Math.min((scrollDistance / sectionHeight) * 100, 100);
  return scrollPercentage;
}

const HowItWorks = () => {
  const theme = useCustomTheme();
  const [scrollDistance, setScrollDistance] = useState(100)
  const sectionRef = useRef(null);

  useEffect(() => {
    function handleScroll() {
      const scrollPercentage = getSectionScrollPercentage(sectionRef).toFixed(2);
      setScrollDistance(+scrollPercentage)
    }

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const translateValue = (2400 * scrollDistance / 100) - 1200

  return (
    <Box
      component={'section'}
      sx={{
        alignItems: 'center',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        position: 'relative',
        width: '100%',
        zIndex: '1',
        height: '3000px'
      }}
      ref={sectionRef}
    >
      <Box
        sx={{
          alignContent: 'center',
          alignItems: 'center',
          display: 'flex',
          flex: 'none',
          flexDirection: 'column',
          flexWrap: 'nowrap',
          gap: '64px',
          height: '100vh',
          justifyContent: 'center',
          overflow: 'visible',
          padding: '0',
          position: 'sticky',
          top: '0',
          width: '100%',
          willChange: 'transform',
          zIndex: '1'
        }}
      >
        <Box
          sx={{
            alignContent: 'center',
            alignItems: 'center',
            display: 'flex',
            flex: 'none',
            flexDirection: 'row',
            flexWrap: 'nowrap',
            gap: '10px',
            height: '100%',
            justifyContent: 'center',
            left: 'calc(50.00000000000002% - 100% / 2)',
            overflow: 'hidden',
            padding: '0',
            position: 'absolute',
            top: 'calc(50.00000000000002% - 100% / 2)',
            width: '100%',
            zIndex: '1'
          }}
        >
          <Stack
            spacing={10}
            direction={'row'}
            sx={{
              opacity: '1',
              transition: 'all 0.1s ease-out',
              transform: `perspective(1200px) translateX(${translateValue}px)`,
              color: 'red'
            }}
          >
            <Paper
              sx={{
                p: '1rem',
              }}
            >
              <Image src={'/saas-img-1.jpg'} width={300} height={300} alt='how it works' />
              <Typography variant='h3'>Signup</Typography>
              <Typography>Tell us a little bit about yourself and your goals</Typography>
            </Paper>
            <Paper>
              <Image src={'/saas-img-1.jpg'} width={300} height={300} alt='how it works' />
              <Typography variant='h3'>Signup</Typography>
              <Typography>Tell us a little bit about yourself and your goals</Typography>
            </Paper>
            <Paper>
              <Image src={'/saas-img-1.jpg'} width={300} height={300} alt='how it works' />
              <Typography variant='h3'>Signup</Typography>
              <Typography>Tell us a little bit about yourself and your goals</Typography>
            </Paper>
            <Paper>
              <Image src={'/saas-img-1.jpg'} width={300} height={300} alt='how it works' />
              <Typography variant='h3'>Signup</Typography>
              <Typography>Tell us a little bit about yourself and your goals</Typography>
            </Paper>
          </Stack>

        </Box>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-start',
            flexShrink: '0',
            transform: 'none'
          }}
        >
          <Typography
            variant='h1'
            sx={{
              textTransform: 'uppercase',
              textAlign: 'center'
            }}
          >
            How It Works
          </Typography>
        </Box>
      </Box>
      <Box
        sx={{
          alignContent: 'center',
          alignItems: 'center',
          display: 'flex',
          flex: 'none',
          flexDirection: 'column',
          flexWrap: 'nowrap',
          gap: '0px',
          height: '100%',
          justifyContent: 'center',
          left: 'calc(50.00000000000002% - 100% / 2)',
          overflow: 'visible',
          padding: '0',
          position: 'absolute',
          top: '0',
          width: '100%',
          zIndex: '1'
        }}
      >

      </Box>
    </Box>
  )
}

export default HowItWorks