import { render } from '@testing-library/react'
import HelpLine from '../index'

const mockUseViewport = vi.hoisted(() => vi.fn())
const mockUseStore = vi.hoisted(() => vi.fn())

vi.mock('reactflow', () => ({
  useViewport: () => mockUseViewport(),
}))

vi.mock('@/app/components/workflow/store', () => ({
  useStore: (selector: (state: {
    helpLineHorizontal?: { top: number, left: number, width: number }
    helpLineVertical?: { top: number, left: number, height: number }
  }) => unknown) => mockUseStore(selector),
}))

describe('HelpLine', () => {
  let helpLineHorizontal: { top: number, left: number, width: number } | undefined
  let helpLineVertical: { top: number, left: number, height: number } | undefined

  beforeEach(() => {
    vi.clearAllMocks()
    helpLineHorizontal = undefined
    helpLineVertical = undefined

    mockUseViewport.mockReturnValue({ x: 10, y: 20, zoom: 2 })
    mockUseStore.mockImplementation((selector: (state: {
      helpLineHorizontal?: { top: number, left: number, width: number }
      helpLineVertical?: { top: number, left: number, height: number }
    }) => unknown) => selector({
      helpLineHorizontal,
      helpLineVertical,
    }))
  })

  it('should render nothing when both help lines are absent', () => {
    const { container } = render(<HelpLine />)

    expect(container).toBeEmptyDOMElement()
  })

  it('should render the horizontal and vertical guide lines using viewport offsets and zoom', () => {
    helpLineHorizontal = { top: 30, left: 40, width: 50 }
    helpLineVertical = { top: 60, left: 70, height: 80 }

    const { container } = render(<HelpLine />)
    const [horizontal, vertical] = Array.from(container.querySelectorAll('div'))

    expect(horizontal).toHaveStyle({
      top: '80px',
      left: '90px',
      width: '100px',
    })
    expect(vertical).toHaveStyle({
      top: '140px',
      left: '150px',
      height: '160px',
    })
  })
})