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

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

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

    canvas.add(tempGrid)

    canvas.renderAll()
  }

  return {
    tempGridModeStateLeftClickEvent,
    tempGridMode,
    setTempGridMode,
  }
}