import { useEffect, useMemo, useState } from 'react'
import { useStore as useReactflow } from 'reactflow'
import { useShallow } from 'zustand/react/shallow'
import { useStore } from '@/app/components/workflow/store'

export const useFloatingRight = (targetElementWidth: number) => {
  const [floatingRight, setFloatingRight] = useState(false)
  const nodePanelWidth = useStore((state) => state.nodePanelWidth)
  const workflowCanvasWidth = useStore((state) => state.workflowCanvasWidth)
  const otherPanelWidth = useStore((state) => state.otherPanelWidth)

  const selectedNodeId = useReactflow(
    useShallow((s) => {
      const nodes = s.getNodes()
      const currentNode = nodes.find((node) => node.data.selected)

      if (currentNode) return currentNode.id
    }),
  )

  useEffect(() => {
    if (typeof workflowCanvasWidth === 'number') {
      const inputFieldPanelWidth = 400
      const marginRight = 4
      const leftWidth =
        workflowCanvasWidth -
        (selectedNodeId ? nodePanelWidth : 0) -
        otherPanelWidth -
        inputFieldPanelWidth -
        marginRight
      setFloatingRight(leftWidth < targetElementWidth + marginRight)
    }
  }, [workflowCanvasWidth, nodePanelWidth, otherPanelWidth, selectedNodeId, targetElementWidth])

  const floatingRightWidth = useMemo(() => {
    if (!floatingRight) return targetElementWidth
    const width = Math.min(
      targetElementWidth,
      (selectedNodeId ? nodePanelWidth : 0) + otherPanelWidth,
    )
    return width
  }, [floatingRight, selectedNodeId, nodePanelWidth, otherPanelWidth, targetElementWidth])

  return {
    floatingRight,
    floatingRightWidth,
  }
}
