import { LINE_TYPE } from '@/common/common'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import { usePopup } from '../usePopup'
import useSWR from 'swr'
import { useSwal } from '../useSwal'
import { useMessage } from '../useMessage'

const LINE_COLOR = {
  EAVES: '#45CD7D',
  GABLE: '#3FBAE6',
  RIDGE: '#9e9e9e',
  DEFAULT: '#000000',
}

export function useRoofLinePropertySetting(id, roof) {
  const canvas = useRecoilValue(canvasState)
  const currentObject = useRecoilValue(currentObjectState)
  const history = useRef([])
  const { closePopup } = usePopup()
  const { swalFire } = useSwal()
  const { getMessage } = useMessage()

  useEffect(() => {
    if (currentObject) {
      currentObject.set({
        stroke: '#EA10AC',
        strokeWidth: 4,
      })
    }
  }, [currentObject])

  const roofLinesInit = () => {
    roof.lines.forEach((line) => {
      line.set({
        stroke: '#000000',
        strokeWidth: 4,
        visible: true,
      })
      line.bringToFront()
      line.setViewLengthText(false)
    })
    canvas.renderAll()
  }

  const handleSetEaves = () => {
    currentObject.set({
      attributes: {
        ...currentObject.attributes,
        type: LINE_TYPE.WALLLINE.EAVES,
      },
      stroke: LINE_COLOR.EAVES,
    })

    history.current.push(currentObject)
    nextLineFocus(currentObject)
    canvas.renderAll()
  }

  const handleSetGable = () => {
    currentObject.set({
      attributes: {
        ...currentObject.attributes,
        type: LINE_TYPE.WALLLINE.GABLE,
      },
      stroke: LINE_COLOR.GABLE,
    })

    history.current.push(currentObject)
    nextLineFocus(currentObject)
    canvas.renderAll()
  }

  const handleSetRidge = () => {
    currentObject.set({
      attributes: {
        ...currentObject.attributes,
        type: LINE_TYPE.SUBLINE.RIDGE,
      },
      stroke: LINE_COLOR.RIDGE,
    })

    history.current.push(currentObject)
    nextLineFocus(currentObject)
    canvas.renderAll()
  }

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

    delete lastLine.attributes
    lastLine.set({
      stroke: LINE_COLOR.DEFAULT,
      strokeWidth: 4,
    })

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

  const handleFix = () => {
    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
    const notSettingLines = roof.lines.filter(
      (line) =>
        !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
    )
    if (notSettingLines.length > 0) {
      swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' })
      return
    }

    roof.lines.forEach((line) => {
      line.set({
        stroke: LINE_COLOR.DEFAULT,
        strokeWidth: 4,
        visible: false,
      })
    })

    canvas.renderAll()
    closePopup(id)
  }

  const nextLineFocus = (selectedLine) => {
    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
    const lines = roof?.lines
    if (!lines) return
    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()
    }
  }

  return {
    roofLinesInit,
    handleSetEaves,
    handleSetGable,
    handleSetRidge,
    handleRollback,
    handleFix,
  }
}