import { Stack, Typography, Button, Box } from '@mui/material'
import { useCustomTheme } from '@/themes/useCustomTheme'
import { useState, useEffect, useRef } from 'react'
import Link from 'next/link';
import { Parallax } from 'react-parallax'

const Hero = () => {
  const theme = useCustomTheme();
  const isClient = typeof window !== 'undefined';
  const [windowWidth, setWindowWidth] = useState(isClient ? window.innerWidth : undefined);
  const parallaxRef = useRef(null);

  useEffect(() => {
    // Update the window width when the window is resized
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };
    
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  useEffect(() => {
    const parallaxElement = parallaxRef.current! as HTMLElement;
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const maxScroll = document.body.scrollHeight - window.innerHeight;
      const parallaxPosition =(maxScroll - scrollTop) / 2 - (parallaxElement.offsetHeight / 2);
      parallaxElement.style.backgroundPositionY = `${parallaxPosition}px`;
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    
    <Box
      sx={{
        width: '100%',
        height: { xs: '100vh', md: '100vh'},
        px: theme.customProperties.sectionPaddingX,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        textAlign: 'center',
        overflow: 'none',
      }}
    >
      <Stack sx={{position: 'relative'}} alignItems={'center'}>
        <Typography 
          variant='h1'
          ref={parallaxRef}
          sx={{ 
            mb: '40px', 
            textTransform: 'uppercase',
            fontWeight: '600',
          }}
        >
          online personal training
        </Typography>
        <Typography 
          variant='h2'
          sx={{
            pb:{xs: '20px', md: '67px'},
            fontSize: { xs: '24px', md: '48px'}
          }}
        >
          Start your fitness journey today, look and feel better tomorrow
        </Typography>
        <Link
          href={'/pricing'}
        >
          <Button
            variant='basic'
            sx={{
              mb: { xs: '40px', md: '0'}
            }}
          >
            Start Now
          </Button>
        </Link>
      </Stack>
      {/*
      <Image 
        style={{
          position: 'absolute',
          zIndex:'1',
          right: '0px',
          objectFit: 'contain',
          display: windowWidth && windowWidth <= 500 ? 'none' : 'block',
        }} 
        src={'/charlee/charlee_1.png'} 
        height={1200} 
        width={400}
        alt='Charlee Barnes personal trainer'
      />*/}
    </Box>
  )
}

export default Hero