import styled, { css } from 'styled-components'
import { Outlet } from 'react-router-dom'
import GamePage from '../../pages/GamePage'
import Header from './Header'
import { useLocation } from 'react-router-dom'
import { useMemo } from 'react'
import getPathPrefix from '../../utils/getPathPrefix'
import { useEffect, useRef } from 'react'

const PageLayout = () => {
  const location = useLocation()
  const isGamePage = useMemo(() => location.pathname === getPathPrefix('/'), [location.pathname])
  const contentRef = useRef(null)
  // reset scroll position
  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.scrollTop = 0
    }
  }, [location.pathname])

  return (
    <StyledLayout>
      <Header />
      <GamePageWrapper>
        <GamePage />
      </GamePageWrapper>
      <ContentWrapper $isOpen={!isGamePage} ref={contentRef}>
        <Outlet />
      </ContentWrapper>
    </StyledLayout>
  )
}

const StyledLayout = styled.div`
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
`

const GamePageWrapper = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  // overflow-y: scroll;
`

const ContentWrapper = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;

    transform: translateY(-100%);
    transition: transform 0.2s ease-out;
    background: url(${getPathPrefix("/images/page-bg.jpg")}) no-repeat center
        center / cover;
    pointer-events: none;
    overflow-y: scroll;

    a, button {
      cursor: pointer;
    }
    

    ${({ $isOpen }) =>
        $isOpen &&
        css`
            transform: translateY(0);
            pointer-events: auto;
        `}
`;

export default PageLayout
