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

//동선이동 형 올림 내림
export function useMovementSetting(id) {
  const TYPE = {
    FLOW_LINE: 'flowLine', // 동선이동
    UP_DOWN: 'updown', //형 올림내림
  }
  const canvas = useRecoilValue(canvasState)
  const { initEvent, addCanvasMouseEventListener } = useEvent()
  const { closePopup } = usePopup()
  const { getMessage } = useMessage()
  const buttonType = [
    { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
    { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
  ]
  const [type, setType] = useState(TYPE.FLOW_LINE)
  const typeRef = useRef(type)

  const FLOW_LINE_REF = {
    DOWN_LEFT_INPUT_REF: useRef(null),
    UP_RIGHT_INPUT_REF: useRef(null),
    DOWN_LEFT_RADIO_REF: useRef(null),
    UP_RIGHT_RADIO_REF: useRef(null),
  }

  const UP_DOWN_REF = {
    UP_INPUT_REF: useRef(null),
    DOWN_INPUT_REF: useRef(null),
    UP_RADIO_REF: useRef(null),
    DOWN_RADIO_REF: useRef(null),
  }

  useEffect(() => {
    typeRef.current = type
  }, [type])

  useEffect(() => {
    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
    wallLines.forEach((line) => {
      line.set({ visible: false })
    })
    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
    outerLines.forEach((line) => {
      line.bringToFront()
      line.set({ selectable: true })
    })

    canvas.renderAll()
    addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
    return () => {
      initEvent()
      const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
      wallLines.forEach((line) => {
        line.set({ visible: true })
      })
      canvas.renderAll()
    }
  }, [])

  const mouseMoveEvent = (e) => {
    if (typeRef.current === TYPE.FLOW_LINE) {
      flowLineEvent(e)
    } else {
      updownEvent(e)
    }
  }
  const flowLineEvent = (e) => {}

  const updownEvent = (e) => {
    const target = canvas.getActiveObject()
    if (!target) {
      return
    }
    const direction = target.direction
    const { top: targetTop, left: targetLeft } = target
    const currentX = canvas.getPointer(e.e).x
    const currentY = Math.floor(canvas.getPointer(e.e).y)

    if (direction === 'left' || direction === 'right') {
      if (targetTop > currentY) {
        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
        UP_DOWN_REF.UP_INPUT_REF.current.value = ''

        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      } else {
        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''

        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      }
    } else {
      if (targetLeft > currentX) {
        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
        UP_DOWN_REF.UP_INPUT_REF.current.value = ''

        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      } else {
        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''

        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      }
    }

    canvas?.renderAll()
  }

  const handleSave = () => {
    if (type === TYPE.FLOW_LINE) {
      // 동선이동
      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
        // 높이 변경: 아래, 왼쪽 체크
      } else {
        // 높이 변경: 위, 오른쪽 체크
      }
    } else {
      // 형 올림내림
      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
        // 자릿수를 올리다 체크
        const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
      } else {
        // 자릿수를 내리다 체크
        const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
      }
    }
  }

  return {
    TYPE,
    closePopup,
    buttonType,
    type,
    setType,
    FLOW_LINE_REF,
    UP_DOWN_REF,
    handleSave,
  }
}