import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { useLine } from '@/hooks/useLine'

export function useWallLineOffsetSetting() {
  const canvas = useRecoilValue(canvasState)
  const { showLine, addLine } = useLine()
  const { getMessage } = useMessage()
  const { addCanvasMouseEventListener, initEvent } = useEvent()
  const length1Ref = useRef(null)
  const length2Ref = useRef(null)
  const radioTypeRef = useRef('1')
  const currentWallLineRef = useRef(null)
  const arrow1Ref = useRef(null)
  const arrow2Ref = useRef(null)

  const TYPES = {
    WALL_LINE_EDIT: 'wallLineEdit',
    OFFSET: 'offset',
  }

  const buttonMenu = [
    { id: 1, name: getMessage('modal.wallline.offset.setting.wallline.edit'), type: TYPES.WALL_LINE_EDIT },
    { id: 2, name: getMessage('modal.wallline.offset.setting.offset'), type: TYPES.OFFSET },
  ]

  const [type, setType] = useState(TYPES.WALL_LINE_EDIT)

  useEffect(() => {
    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
    outerLines.forEach((outerLine) => {
      outerLine.set({ selectable: true })
      showLine(outerLine)
    })

    const roofs = canvas.getObjects().filter((obj) => obj.name === 'roofBase')

    roofs.forEach((roof) => {
      roof.innerLines.forEach((innerLine) => {
        canvas.remove(innerLine)
      })
      canvas.remove(roof)
    })

    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
    wallLines.forEach((wallLine) => {
      canvas.remove(wallLine)
    })

    addCanvasMouseEventListener('mouse:down', mouseDown)

    return () => {
      canvas.discardActiveObject()
      initEvent()
    }
  }, [])

  const mouseDown = (e) => {
    if (!e.target || (e.target && e.target.name !== 'outerLine')) {
      return
    }

    currentWallLineRef.current = e.target
  }

  const handleSave = () => {
    switch (type) {
      case TYPES.WALL_LINE_EDIT:
        handleWallLineEditSave()
        break
      case TYPES.OFFSET:
        handleOffsetSave()
        break
    }
  }

  const handleWallLineEditSave = () => {
    const direction = currentWallLineRef.current.direction
    let canDirections = direction === 'left' || direction === 'right' ? ['up', 'down'] : ['left', 'right']
    if (radioTypeRef === 1) {
      if (!canDirections.includes(arrow1Ref.current)) {
        alert('방향을 다시 선택하세요')
        return
      }
    } else {
      if (!canDirections.includes(arrow2Ref.current)) {
        alert('방향을 다시 선택하세요')
        return
      }
    }
  }

  const handleOffsetSave = () => {
    const direction = currentWallLineRef.current.direction
    let canDirections = direction === 'left' || direction === 'right' ? ['up', 'down'] : ['left', 'right']

    if (!canDirections.includes(arrow1Ref.current)) {
      alert('방향을 다시 선택하세요')
      return
    }

    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
    const idx = currentWallLineRef.current.idx
    const prevLine = outerLines.find((line) => (line.idx === idx - 1 < 0 ? outerLines.length - 1 : idx - 1))
    const currentLine = currentWallLineRef.current
    const nextLine = outerLines.find((line) => (line.idx === idx + 1 > outerLines.length - 1 ? 0 : idx + 1))
    switch (arrow1Ref.current) {
      case 'up': {
        console.log(prevLine, currentLine, nextLine)
        break
      }
      case 'down': {
        break
      }
      case 'left': {
        break
      }
      case 'right': {
        break
      }
    }
  }

  return { type, setType, buttonMenu, TYPES, length1Ref, length2Ref, radioTypeRef, currentWallLineRef, arrow1Ref, arrow2Ref, handleSave }
}