import { useEffect, useRef } from 'react'
import { LINE_TYPE } from '@/common/common'
import { useRecoilState, 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'

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

  const currentObject = useRecoilValue(currentObjectState)

  const { drawRoofPolygon } = useMode()
  const setPoints = useResetRecoilState(outerLinePointsState)

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

  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 = () => {
    if (!confirm('외벽선 속성 설정을 완료하시겠습니까?')) {
      return
    }
    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')

    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: 'wallLine', fill: 'transparent', stroke: 'black' })

    wall.lines = [...lines]

    const roof = drawRoofPolygon(wall)

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

  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([])
    setShowPropertiesSettingModal(false)
  }

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