import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { CategoriesTable } from '@/app/(private)/dashboard/categories/overview/CategoriesTable';
import { DataTable } from '@/components/ui/data-table';

// Mock DataTable and EntityDetailSheet
vi.mock('@/components/ui/data-table', () => ({
  DataTable: vi.fn(({ onRowClick, data }) => (
    <div data-testid="data-table">
      {data.map((item: any) => (
        <button
          key={item.id}
          data-testid={`row-${item.id}`}
          onClick={() => onRowClick(item)}
        >
          {item.name}
        </button>
      ))}
    </div>
  )),
}));

vi.mock('@/components/dashboard/data-view/EntityDetailSheet', () => ({
  EntityDetailSheet: vi.fn(() => <div data-testid="entity-detail-sheet" />),
}));

describe('CategoriesTable Performance', () => {
  const mockColumns = [{ accessorKey: 'name', header: 'Name' }];
  const mockData = [
    { id: 1, name: 'Category 1' },
    { id: 2, name: 'Category 2' },
  ];

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should maintain referential stability of onRowClick', () => {
    const { rerender } = render(<CategoriesTable columns={mockColumns} data={mockData} />);

    // @ts-ignore
    const initialOnRowClick = DataTable.mock.calls[0][0].onRowClick;

    // Simulate selecting a category which triggers a state change in CategoriesTable
    const row1 = screen.getByTestId('row-1');
    fireEvent.click(row1);

    // Rerender with same props
    rerender(<CategoriesTable columns={mockColumns} data={mockData} />);

    // Check that onRowClick is still the same function reference
    // @ts-ignore
    const secondOnRowClick = DataTable.mock.calls[DataTable.mock.calls.length - 1][0].onRowClick;
    expect(secondOnRowClick).toBe(initialOnRowClick);
  });
});