qcast-front/src/hooks/roofcover/usePropertiesSetting.js

import { useEffect, useRef } from 'react'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { useRecoilValue, useResetRecoilState } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
import { useLine } from '@/hooks/useLine'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { usePopup } from '@/hooks/usePopup'
import { settingModalFirstOptionsState } from '@/store/settingAtom'

// 외벽선 속성 설정
export function usePropertiesSetting(id) {
  const canvas = useRecoilValue(canvasState)

  const currentObject = useRecoilValue(currentObjectState)

  const { drawRoofPolygon } = useMode()
  const setPoints = useResetRecoilState(outerLinePointsState)
  const settingModalFirstOptions = useRecoilValue(settingModalFirstOptionsState)

  const { addPolygonByLines } = usePolygon()
  const { removeLine, hideLine } = useLine()
  const { closePopup } = usePopup()

  useEffect(() => {
    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
    lines.forEach((line) => {
      const lineType = line.attributes?.type
      if (!lineType) {
        line.set({
          stroke: '#000000',
          strokeWidth: 4,
        })
      }
    })
    if (!currentObject) {
      return
    }
    if (currentObject.name !== 'outerLine') {
      return
    }

    const type = currentObject.attributes?.type

    if (!type) {
      currentObject.set({
        stroke: '#EA10AC',
        strokeWidth: 4,
      })
    }

    canvas.renderAll()
  }, [currentObject])

  const history = useRef([])

  const handleSetEaves = () => {
    const selectedLine = canvas?.getActiveObject()
    if (!selectedLine) {
      return
    }
    selectedLine.set({
      stroke: '#45CD7D',
      strokeWidth: 4,
      attributes: {
        offset: 50,
        type: LINE_TYPE.WALLLINE.EAVES,
        pitch: 4,
      },
    })
    history.current.push(selectedLine)
    nextLineFocus(selectedLine)
    canvas.renderAll()
  }

  const handleSetGable = () => {
    const selectedLine = canvas?.getActiveObject()
    if (!selectedLine) {
      return
    }
    selectedLine.set({
      stroke: '#3FBAE6',
      strokeWidth: 4,
      attributes: {
        offset: 30,
        type: LINE_TYPE.WALLLINE.GABLE,
      },
    })
    history.current.push(selectedLine)
    nextLineFocus(selectedLine)
    canvas.renderAll()
  }

  const nextLineFocus = (selectedLine) => {
    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
    const index = lines.findIndex((line) => line === selectedLine)

    const nextLine = lines[index + 1] || lines[0]
    if (!nextLine.attributes?.type) {
      canvas.setActiveObject(nextLine)
    } else {
      //activeObject 해제
      canvas.discardActiveObject()
    }
  }

  const handleRollback = () => {
    if (history.current.length === 0) {
      return
    }
    const lastLine = history.current.pop()

    delete lastLine.attributes
    lastLine.set({
      stroke: '#000000',
      strokeWidth: 4,
    })

    canvas.setActiveObject(lastLine)
    canvas.renderAll()
  }

  const handleFix = () => {
    const isClose = confirm('외벽선 속성 설정을 완료하시겠습니까?')
    if (isClose) {
      const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')

      const notSetAttributes = lines.filter((line) => !line.attributes?.type)
      if (notSetAttributes.length > 0) {
        // 세팅이 하나라도 안되어있으면 초기화
        lines.forEach((line) => {
          line.set({
            stroke: '#000000',
            strokeWidth: 4,
          })
        })
        canvas.discardActiveObject()
        closePopup(id)
        return
      }

      lines.forEach((line) => {
        line.set({
          attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
          stroke: '#000000',
          strokeWidth: 4,
        })

        hideLine(line)
      })

      const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })

      wall.lines = [...lines]

      const roof = drawRoofPolygon(wall)

      setPoints([])
      canvas.renderAll()
      roof.drawHelpLine(settingModalFirstOptions)

      closePopup(id)
      return
    } else {
      return
    }
  }

  const closeModal = (fn) => {
    if (!confirm('외벽선 속성 설정을 종료 하시겠습니까?')) {
      return
    }

    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')

    lines.forEach((line) => {
      line.set({
        attributes: { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
        stroke: '#000000',
        strokeWidth: 4,
      })
    })

    canvas.renderAll()
    setPoints([])
    closePopup(id)
  }

  return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }
}