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',
  ACTIVE: '#EA10AC',
}

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

  useEffect(() => {
    if (currentObject && currentObject.name === 'cloneRoofLine') {
      // roof.lines.forEach((line) => {
      canvas
        .getObjects()
        .filter((obj) => obj.name === 'cloneRoofLine')
        .forEach((line) => {
          const lineType = line.attributes?.type
          if (!lineType) {
            line.set({
              stroke: '#000000',
              strokeWidth: 4,
            })
          }
        })
      currentObject.set({
        stroke: LINE_COLOR.ACTIVE,
        strokeWidth: 4,
      })
      canvas.renderAll()
    }
  }, [currentObject])

  useEffect(() => {
    return () => {
      canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine'))
      canvas.renderAll()
    }
  }, [])

  const roofLinesInit = () => {
    roof.lines.forEach((line) => {
      line.clone((cloned) => {
        cloned.set({
          ...line,
          stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
          strokeWidth: 4,
          visible: true,
          name: 'cloneRoofLine',
          selectable: true,
          originLine: line.id,
        })
        line.set({
          visible: false,
          attributes: {
            ...line.attributes,
          },
        })
        canvas.add(cloned)
        cloned.bringToFront()
      })
      // line.set({
      //   stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
      //   strokeWidth: 4,
      //   visible: true,
      //   name: 'roofLine',
      // })
      // line.bringToFront()
    })
    canvas.renderAll()
  }

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

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

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

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

  const handleSetRidge = () => {
    if (!currentObject) return
    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(
    const notSettingLines = canvas
      .getObjects()
      .filter((obj) => obj.name === 'cloneRoofLine')
      .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
    }

    canvas
      .getObjects()
      .filter((obj) => obj.name === 'cloneRoofLine')
      .forEach((line) => {
        const originLine = roof.lines.find((obj) => obj.id === line.originLine)

        originLine.set({
          attributes: {
            ...originLine.attributes,
            type: line.attributes.type,
          },
          visible: true,
        })
        canvas.remove(line)
      })

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

    canvas.renderAll()
    closePopup(id)
    if (setIsHidden) setIsHidden(false)
  }

  const nextLineFocus = (selectedLine) => {
    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
    // const lines = roof?.lines
    const lines = canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine')

    if (!lines) return
    const index = lines.findIndex((line) => line === selectedLine)

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

  const handleClosed = () => {
    canvas
      .getObjects()
      .filter((obj) => obj.name === 'cloneRoofLine')
      .forEach((line) => {
        roof.lines
          .find((obj) => obj.id === line.originLine)
          .set({
            visible: true,
          })
        canvas.remove(line)
      })
  }

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