import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
import { useMouse } from '@/hooks/useMouse'
import { gridDisplaySelector } from '@/store/settingAtom'

export function useAdsorptionPoint() {
  const canvas = useRecoilValue(canvasState)
  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
  const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
  const isGridDisplay = useRecoilValue(gridDisplaySelector)
  const { getIntersectMousePoint } = useMouse()

  const getAdsorptionPoints = () => {
    return canvas.getObjects().filter((obj) => obj.visible && obj.name === 'adsorptionPoint')
  }

  const adsorptionPointAddModeStateEvent = (opt) => {
    //흡착점 모드일 경우
    let pointer = getIntersectMousePoint(opt)

    const adsorptionPoint = new fabric.Circle({
      radius: 3,
      fill: 'red',
      left: pointer.x - 3,
      top: pointer.y - 3,
      x: pointer.x,
      y: pointer.y,
      selectable: true,
      name: 'adsorptionPoint',
      visible: isGridDisplay,
    })
    canvas.add(adsorptionPoint)
    setAdsorptionPointMode(true)
    canvas.renderAll()
  }

  const removeAdsorptionPoint = () => {
    const adsorptionPoints = getAdsorptionPoints()
    adsorptionPoints.forEach((adsorptionPoint) => {
      canvas.remove(adsorptionPoint)
    })
    canvas.renderAll()
  }

  return {
    adsorptionPointAddMode,
    adsorptionPointMode,
    adsorptionRange,
    getAdsorptionPoints,
    adsorptionPointAddModeStateEvent,
    removeAdsorptionPoint,
  }
}