'use client'
import { HeaderEntityResponseCollection } from '@/generated/types'
import { ReactNode, useEffect, useState } from 'react'
import Footer, { HeaderResponses } from '../footer/Footer'
import Menu from '../header/header'
import { ApolloWrapper } from '../wrapper-apollo/apollo-wrapper'

type Props = {
  children: ReactNode
  lang: string
}

const MainLayoutComponent: React.FC<Props> = ({ children, lang }) => {
  const [isScrolled, setIsScrolled] = useState(false)
  const [scrollPosition, setScrollPosition] = useState(0)
  const [headerData, setHeaderData] = useState<HeaderResponses | null>(null)
  const handleScroll = () => {
    const currentPosition = window.pageYOffset
    setScrollPosition(currentPosition)

    let hideThreshold = window.innerHeight * 0.3

    if (window.innerWidth < 768 && window.innerWidth >= 640) {
      hideThreshold = window.innerHeight * 0.2
    } else if (window.innerWidth < 640) {
      hideThreshold = window.innerHeight * 0.15
    }

    if (
      currentPosition >= hideThreshold &&
      currentPosition <= window.innerHeight
    ) {
      setIsScrolled(true)
    } else {
      setIsScrolled(false)
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)

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

  const handleDataReceived = (data: HeaderEntityResponseCollection) => {
    setHeaderData((data as unknown) as HeaderResponses)
  }

  return (
    <>
      <ApolloWrapper>
        <Menu
          language={lang}
          isScrolled={isScrolled}
          scrollPosition={scrollPosition}
          onDataReceived={handleDataReceived}
        />
        {children}
        <Footer lng={lang} headerData={headerData} />
      </ApolloWrapper>
    </>
  )
}

export default MainLayoutComponent