import React, { useEffect, useRef, ReactNode } from 'react'
import styled from 'styled-components'

export type BurgerMenuProps = {
  /**
   * array of option objects
   */
  options?: ({
    label: string;
    icon: ReactNode;
    onClick: ()=>void;
})[];
  css?: string;
};


export const BurgerMenu = ({ options ,css }: BurgerMenuProps):JSX.Element => {
  const ref = useRef<HTMLDivElement>(null)
  
  const closeSideMenu = () => {
    document.querySelector('.menu__toggler')?.classList.remove('active')
    document.querySelector('.menu')?.classList.remove('active')
    setTimeout(() => {
      const menu =  document.querySelector('.menu') as HTMLElement
      menu.style.display = 'none'
    },500)
  }

  useEffect(() => {
    const listener = ({ target }: MouseEvent | TouchEvent) => {
      if (!ref.current || ref.current.contains(target as Node)) return 
      closeSideMenu()
    }
    document.addEventListener('mousedown',listener)
    document.addEventListener('touchstart',listener)
    return () => {
      document.removeEventListener('mousedown',listener)
      document.removeEventListener('touchstart',listener)
    }
  },
  [ref,closeSideMenu],
  )

  const handleClick = () => {
    const toggler = document.querySelector('.menu__toggler')
    const menu = document.querySelector('.menu') as HTMLElement
    if(!menu.classList.contains('active')) menu.style.display = 'flex' 
    menu.style.position = 'fixed'
    setTimeout(() => {
      toggler?.classList.toggle('active')
      menu.classList.toggle('active')
      if(!menu.classList.contains('active')) setTimeout(() => menu.style.display = 'none',500)
    },0)
  }

  return (
    <Container ref={ref} css={css} className="burger-menu">
      <Options className="menu">
        {options?.map((option,index) => {
          const { label,icon,onClick } = option
          return (
            <Option 
              onClick={() => {
                closeSideMenu()
                onClick()
              }}
              key={index}>
              {icon}
              <Heading>{label}</Heading>
            </Option>
          )
        })}
      </Options>
      <MenuToggler 
        onClick={handleClick}
        className="menu__toggler"><span></span></MenuToggler>
    </Container>
  )
}

const Container = styled.div<{css?:string}>`
  display: flex;
  justify-content: center;
  border-radius:0;
  flex:0;
  align-items: center;
  overflow-x:hidden;
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  ${(p) => p.css}
`

const Options = styled.div`
  position: absolute;
  top:0;
  height:100vh;
  right: calc(-1 * max(40vw,350px));
  z-index: 998;
  color: black;
  background-color:#7ab2fbf2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
  width: max(40vw,350px);
  height: 100%;
  padding: calc(max(40vw,350px) * 0.25);
  padding-top:10vh;
  border-radius:0;
  flex-direction: column;
  justify-content: flex-start;
  transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1);
  &.active {
    right: 0;
  }
  p {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`
const width = 28
const MenuToggler = styled.div`
  z-index: 999;
  height: ${width}px;
  width: ${width}px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  
  span,
  span::before,
  span::after {
    position: absolute;
    content: '';
    width: ${width}px;
    height: 2.5px;
    background: black;
    border-radius: 20px;
    transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  
  span::before {
    top: -8px;
  }
  
  span::after {
    top: 8px;
  }
  
  &.active > span  {
    background: transparent;
  }

  &.active > span::before,
  &.active > span::after {
    /* background: white; */
    top: 0px;
  }

  &.active > span::before  {
    transform: rotate(-225deg);
  }

  &.active > span::after  {
    transform: rotate(225deg);
  }

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

  }
`
const Option = styled.div`
  gap:20px;
  justify-content:flex-start;
  align-items:center;
  display:flex;
  cursor:pointer;
  padding:15px 15px;
  box-sizing:border-box;
  border-radius:40px;
  border-radius:0;
  flex:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
`
const Heading = styled.div`
  font-weight:500;
  box-sizing:border-box;
  font-size:1.3rem;
  margin:0;
  padding:0;
  flex:0;
  white-space: nowrap;
`