// @vitest-environment jsdom

import { act, createElement } from 'react';
import { createRoot } from 'react-dom/client';
import { describe, expect, it } from 'vitest';
import { ResizableResultTable } from '../../src/components/ResizableResultTable/ResizableResultTable';

function pointerEvent(type: string, pointerId: number, clientX: number): Event {
  const event = new Event(type, { bubbles: true, cancelable: true });
  Object.defineProperties(event, {
    pointerId: { value: pointerId },
    clientX: { value: clientX }
  });
  return event;
}

describe('ResizableResultTable', () => {
  it('passt per Doppelklick an den Inhalt an und laesst die Trennlinie ziehen', () => {
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
    const container = document.createElement('div');
    const root = createRoot(container);

    act(() => root.render(createElement(ResizableResultTable, {
      enabled: true,
      headers: ['First', 'Second']
    }, createElement('tr', null,
      createElement('td', null, 'A deliberately longer synthetic value'),
      createElement('td', null, 'Short')
    ))));

    const headerCells = Array.from(container.querySelectorAll('th')) as HTMLTableCellElement[];
    const firstColumnCells = [headerCells[0], container.querySelectorAll('td')[0]] as HTMLTableCellElement[];
    headerCells.forEach((cell, index) => {
      cell.getBoundingClientRect = () => ({ width: index === 0 ? 120 : 140 } as DOMRect);
    });
    Object.defineProperty(firstColumnCells[0], 'scrollWidth', { configurable: true, value: 86 });
    Object.defineProperty(firstColumnCells[1], 'scrollWidth', { configurable: true, value: 238 });

    act(() => container.querySelector('.result-column-resizer')?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true })));
    expect(container.querySelector('col')?.getAttribute('width')).toBe('240');
    expect(container.querySelector('table')?.classList.contains('has-custom-column-widths')).toBe(true);

    let handle = container.querySelector('.result-column-resizer') as HTMLElement;
    Object.assign(handle, {
      setPointerCapture: () => undefined,
      hasPointerCapture: () => false,
      releasePointerCapture: () => undefined
    });
    act(() => handle.dispatchEvent(pointerEvent('pointerdown', 7, 100)));
    handle = container.querySelector('.result-column-resizer') as HTMLElement;
    act(() => handle.dispatchEvent(pointerEvent('pointermove', 7, 148)));
    expect(container.querySelector('col')?.getAttribute('width')).toBe('168');

    act(() => root.unmount());
  });

  it('unterstuetzt die Tastatur am fokussierbaren Trenner', () => {
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
    const container = document.createElement('div');
    const root = createRoot(container);
    act(() => root.render(createElement(ResizableResultTable, {
      enabled: true,
      headers: ['First', 'Second']
    }, createElement('tr', null, createElement('td', null, 'One'), createElement('td', null, 'Two')))));
    const headers = Array.from(container.querySelectorAll('th')) as HTMLTableCellElement[];
    headers.forEach(cell => { cell.getBoundingClientRect = () => ({ width: 100 } as DOMRect); });

    act(() => container.querySelector('.result-column-resizer')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
    expect(container.querySelector('col')?.getAttribute('width')).toBe('116');

    act(() => root.unmount());
  });
});