import React from "react"
import { Center, Text } from "@chakra-ui/react"

export const ReactiveRightNav = (props) => {
  const setNav = React.useCallback((active) => {
    setMr(active ? "0%" : "-100%")
    setNavActive(active)
  }, [])

  const [entered, setEntered] = React.useState(false)

  React.useEffect(() => {
    // react to mouse move event
    const listener = (event) => {
      const windowWidth = window.innerWidth
      if (!entered) {
        if (event?.clientX >= windowWidth - 60) {
          setNav(true)
        } else if (event?.clientX <= windowWidth - 100) {
          setNav(false)
        }
      }
    }
    window.addEventListener("mousemove", listener)
    return () => {
      window.removeEventListener("mousemove", listener)
    }
  }, [setNav, entered])

  const [navActive, setNavActive] = React.useState(false)

  // const defaultMr = '-100%'
  const defaultMr = "0%"

  const [mr, setMr] = React.useState(defaultMr)

  const navItems = React.useMemo(() => {
    return ["home", "imagine", "create", "share"]
  }, [])

  return (
    <Center
      position="fixed"
      top={0}
      right={0}
      flexDirection="column"
      height="100%"
      marginRight={mr}
      transition="all 0.3s ease-in-out"
    >
      <Center
        flexDirection="column"
        minWidth="600px"
        maxWidth="100%"
        height="85%"
        background="rgba(0, 0, 0, 0.01)"
        borderLeftRadius="40px"
        onMouseEnter={() => setEntered(true)}
        onMouseLeave={() => setEntered(false)}
        paddingX={100}
        paddingY={80}
      >
        {navItems.map((navItem, idx) => {
          return (
            <Text
              key={idx}
              as="h2"
              color="black"
              fontSize="30px"
              fontWeight="semibold"
              textTransform="capitalize"
              cursor="pointer"
              marginY="auto"
            >
              {navItem}
            </Text>
          )
        })}
      </Center>
    </Center>
  )
}