import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'

export function useObject() {
  const canvas = useRecoilValue(canvasState)

  const deleteObject = (obj) => {
    canvas
      ?.getObjects()
      .filter((item) => item.parent === obj || item.parentId === obj.id)
      .forEach((item) => {
        canvas.remove(item)
      })
  }

  const handleSelectableObjects = (targetNames = [], bool) => {
    if (!canvas) {
      return
    }
    const selectableObjects = canvas.getObjects().filter((obj) => targetNames.includes(obj.name))
    selectableObjects.forEach((obj) => {
      obj.selectable = bool
    })
    canvas.renderAll()
  }

  return { deleteObject, handleSelectableObjects }
}