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 getVisibleBounds = () => {
    const currentZoom = canvas.getZoom()
    const vt = canvas.viewportTransform
    const visibleLeft = -vt[4] / currentZoom
    const visibleTop = -vt[5] / currentZoom
    const visibleRight = visibleLeft + canvas.getWidth() / currentZoom
    const visibleBottom = visibleTop + canvas.getHeight() / currentZoom
    const padding = 500
    return {
      left: visibleLeft - padding,
      top: visibleTop - padding,
      right: visibleRight + padding,
      bottom: visibleBottom + padding,
    }
  }

  const tempGridModeStateLeftClickEvent = (e) => {
    //임의 그리드 모드일 경우
    let pointer = getIntersectMousePoint(e)
    const bounds = getVisibleBounds()

    const tempGrid = new fabric.Line([pointer.x, bounds.top, pointer.x, bounds.bottom], {
      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,
  }
}