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
      mr={mr}
      transition={'all 0.3s ease-in-out'}
      position='fixed'
      top={0}
      right={0}
      h='100%'
      flexDir='column'
    >
      <Center
        onMouseEnter={() => setEntered(true)}
        onMouseLeave={() => setEntered(false)}
        flexDir={'column'}
        borderLeftRadius={'40px'}
        h='85%'
        minW={'600px'}
        maxW='100%'
        py={80}
        px={100}
        bg={`rgba(0, 0, 0, 0.01)`}
      >
        {navItems.map((navItem, idx) => {
          return (
            <Text
              color='black'
              my={'auto'}
              fontWeight='semibold'
              key={idx}
              textTransform={'capitalize'}
              as='h2'
              cursor='pointer'
              fontSize='30px'
            >
              {navItem}
            </Text>
          )
        })}
      </Center>
    </Center>
  )
}