'use client'
import { useEffect } from 'react'
import '@/styles/contents.scss'
import { useRecoilState, useRecoilValue } from 'recoil'
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import { useTempGrid } from '@/hooks/useTempGrid'
import { useContextMenu } from '@/hooks/useContextMenu'
import { useEvent } from '@/hooks/useEvent'
import { canvasState, currentObjectState } from '@/store/canvasAtom'

export default function QContextMenu(props) {
  const canvas = useRecoilValue(canvasState)
  const { contextRef, canvasProps } = props
  const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
  const contextMenuList = useRecoilValue(contextMenuListState)
  const currentObject = useRecoilValue(currentObjectState)
  const { tempGridMode, setTempGridMode } = useTempGrid()
  const { handleKeyup } = useContextMenu()
  const { addDocumentEventListener, removeDocumentEvent } = useEvent()
  // const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)

  const getYPosition = (e) => {
    const contextLength = contextMenuList.reduce((acc, cur, index) => {
      return acc + cur.length
    }, 0)
    return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
  }

  const handleContextMenu = (e) => {
    // e.preventDefault() //기존 contextmenu 막고

    if (currentObject) {
      const isArray = currentObject.hasOwnProperty('arrayData')
      if (isArray && currentObject.arrayData.length === 0) return

      if (tempGridMode) return
      const position = {
        x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
        y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
      }
      setContextMenu({ visible: true, ...position, currentMousePos: canvasProps.getPointer(e) })
      addDocumentEventListener('keyup', document, handleKeyup)
    }
  }

  const handleClick = (e) => {
    // e.preventDefault()
    setContextMenu({ ...contextMenu, visible: false })
  }

  const handleOutsideClick = (e) => {
    // e.preventDefault()
    if (contextMenu.visible) {
      setContextMenu({ ...contextMenu, visible: false })
      removeDocumentEvent('keyup')
    }
  }

  useEffect(() => {
    if (!contextRef.current) return

    canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
    document.addEventListener('click', handleClick)
    document.addEventListener('click', handleOutsideClick)

    return () => {
      removeDocumentEvent('keyup')
      document.removeEventListener('click', handleClick)
      document.removeEventListener('click', handleOutsideClick)
      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
    }
  }, [contextRef, contextMenuList, currentObject])

  return (
    <>
      {contextMenu.visible && (
        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x }}>
          {/*<ul>*/}
          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
          {/*  이동*/}
          {/*</li>*/}
          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>*/}
          {/*  삭제*/}
          {/*</li>*/}
          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>*/}
          {/*  복사*/}
          {/*</li>*/}
          {/*</ul>*/}
          {props.children}
        </div>
      )}
    </>
  )
}