/**
 * (share/ui/resizable — panel group, handle with/without grip).
 */
import { render, screen } from '@testing-library/react'
import React from 'react'

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '../resizable'

type ResizableGroupProps = {
  children: React.ReactNode
  className?: string
  direction: 'horizontal' | 'vertical'
}

beforeAll(() => {
  if (typeof globalThis.DOMRect === 'undefined') {
    globalThis.DOMRect = class DOMRect {
      x = 0
      y = 0
      width = 0
      height = 0
      top = 0
      right = 0
      bottom = 0
      left = 0
      static fromRect() {
        return new DOMRect()
      }
      toJSON() {
        return {}
      }
    } as unknown as typeof DOMRect
  }
})

describe('[share/ui/resizable]', () => {
  function renderResizable(children: React.ReactNode, className?: string) {
    const Group = ResizablePanelGroup as unknown as React.ComponentType<ResizableGroupProps>

    return render(
      <Group direction="horizontal" className={className}>
        {children}
      </Group>,
    )
  }

  describe('ResizablePanelGroup', () => {
    it('renders child inside group', () => {
      renderResizable(<div data-testid="child" />)
      expect(screen.getByTestId('child')).toBeInTheDocument()
    })

    it('applies className on the group', () => {
      renderResizable(<div>content</div>, 'test-class')
      const group = screen.getByText('content').parentElement
      expect(group).toHaveClass('test-class')
    })
  })

  describe('ResizablePanel', () => {
    it('wraps panel children', () => {
      renderResizable(
        <ResizablePanel defaultSize={50}>
          <div data-testid="panel-child" />
        </ResizablePanel>,
      )
      expect(screen.getByTestId('panel-child')).toBeInTheDocument()
    })
  })

  describe('ResizableHandle', () => {
    it('renders separator without handle grip', () => {
      renderResizable(
        <>
          <ResizablePanel defaultSize={50}>
            <div>left</div>
          </ResizablePanel>
          <ResizableHandle data-testid="handle" />
          <ResizablePanel defaultSize={50}>
            <div>right</div>
          </ResizablePanel>
        </>,
      )

      expect(screen.getByRole('separator')).toBeInTheDocument()
    })

    it('renders inner grip when withHandle is true', () => {
      renderResizable(
        <>
          <ResizablePanel defaultSize={50}>
            <div>left</div>
          </ResizablePanel>
          <ResizableHandle withHandle data-testid="handle" />
          <ResizablePanel defaultSize={50}>
            <div>right</div>
          </ResizablePanel>
        </>,
      )

      const handle = screen.getByRole('separator')
      expect(handle).toBeInTheDocument()
      expect(handle.querySelector('div')).toBeInTheDocument()
    })
  })
})
