'use client'
import { useEffect } from 'react'
import '@/styles/contents.scss'
import { useRecoilState } from 'recoil'
import { contextMenuState } from '@/store/contextMenu'

export default function QContextMenu(props) {
  const { contextRef, canvasProps, handleKeyup } = props
  const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
  let contextType = ''

  if (activeObject) {
    if (activeObject.initOptions && activeObject.initOptions.name) {
      //이건 바뀔 가능성이 있음
      if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
        contextType = 'surface' //면형상
      }
    }
  }

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

    const handleContextMenu = (e) => {
      // e.preventDefault() //기존 contextmenu 막고
      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
      document.addEventListener('keyup', (e) => handleKeyup(e))
      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
    }

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

    const handleOutsideClick = (e) => {
      // e.preventDefault()
      if (contextMenu.visible && !ref.current.contains(e.target)) {
        setContextMenu({ ...contextMenu, visible: false })
      }
    }

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

    return () => {
      document.removeEventListener('click', handleClick)
      document.removeEventListener('click', handleOutsideClick)
    }
  }, [contextRef, contextMenu])

  const handleObjectMove = () => {
    activeObject.set({
      lockMovementX: false, // X 축 이동 잠금
      lockMovementY: false, // Y 축 이동 잠금
    })

    canvasProps?.on('object:modified', function (e) {
      activeObject.set({
        lockMovementX: true, // X 축 이동 잠금
        lockMovementY: true, // Y 축 이동 잠금
      })
    })
  }

  const handleObjectDelete = () => {
    if (confirm('삭제하실거?')) {
      canvasProps.remove(activeObject)
    }
  }

  const handleObjectCopy = () => {
    activeObject.clone((cloned) => {
      cloned.set({
        left: activeObject.left + activeObject.width + 20,
        initOptions: { ...activeObject.initOptions },
        lockMovementX: true, // X 축 이동 잠금
        lockMovementY: true, // Y 축 이동 잠금
        lockRotation: true, // 회전 잠금
        lockScalingX: true, // X 축 크기 조정 잠금
        lockScalingY: true, // Y 축 크기 조정 잠금
      })
      canvasProps?.add(cloned)
    })
  }

  return (
    <>
      {contextMenu.visible && (
        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
          {/*<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>
      )}
    </>
  )
}
