import { canvasState, tempGridModeState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue } from 'recoil'
import { gridColorState } from '@/store/gridAtom'
import { gridDisplaySelector } from '@/store/settingAtom'

export function useTempGrid() {
  const canvas = useRecoilValue(canvasState)
  const gridColor = useRecoilValue(gridColorState)
  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
  const isGridDisplay = useRecoilValue(gridDisplaySelector)
  const tempGridModeStateLeftClickEvent = (e) => {
    //임의 그리드 모드일 경우
    let pointer = canvas.getPointer(e.e)

    const tempGrid = new fabric.Line([pointer.x, 0, pointer.x, canvas.height], {
      stroke: gridColor,
      strokeWidth: 1,
      selectable: true,
      lockMovementX: true,
      lockMovementY: true,
      lockRotation: true,
      lockScalingX: true,
      lockScalingY: true,
      strokeDashArray: [5, 2],
      opacity: 0.3,
      direction: 'vertical',
      visible: isGridDisplay,
      name: 'tempGrid',
    })

    canvas.add(tempGrid)

    canvas.renderAll()
  }

  const tempGridRightClickEvent = (e) => {
    e.preventDefault()
    e.stopPropagation()
    //임의 그리드 모드일 경우
    let pointer = { x: e.offsetX, y: e.offsetY }

    const tempGrid = new fabric.Line([0, pointer.y, canvas.width, pointer.y], {
      stroke: gridColor,
      strokeWidth: 1,
      selectable: true,
      lockMovementX: true,
      lockMovementY: true,
      lockRotation: true,
      lockScalingX: true,
      lockScalingY: true,
      strokeDashArray: [5, 2],
      opacity: 0.3,
      name: 'tempGrid',
      visible: isGridDisplay,
      direction: 'horizontal',
    })

    canvas.add(tempGrid)

    canvas.renderAll()
  }

  return {
    tempGridModeStateLeftClickEvent,
    tempGridRightClickEvent,
    tempGridMode,
    setTempGridMode,
  }
}