import { act, renderHook } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';

import { MantineBetterMenusStoreProvider, useMantineBetterMenus } from './Store';

// Mock dependencies
vi.mock('@warkypublic/artemis-kit', () => ({
  getUUID: () => 'test-uuid-123',
}));

const createWrapper = () => {
  return ({ children }: { children: React.ReactNode }) => (
    <MantineBetterMenusStoreProvider>{children}</MantineBetterMenusStoreProvider>
  );
};

describe('MantineBetterMenus Store', () => {
  let wrapper: ReturnType<typeof createWrapper>;

  beforeEach(() => {
    wrapper = createWrapper();
  });

  it('initializes with empty menus array', () => {
    const { result } = renderHook(() => useMantineBetterMenus(), { wrapper });

    expect(result.current.menus).toEqual([]);
  });

  it('can show a menu', () => {
    const { result } = renderHook(() => useMantineBetterMenus(), { wrapper });

    act(() => {
      result.current.show('test-menu', {
        items: [{ label: 'Test Item' }],
        x: 100,
        y: 200,
      });
    });

    expect(result.current.menus).toHaveLength(1);
    expect(result.current.menus[0]).toMatchObject({
      id: 'test-menu',
      items: [{ label: 'Test Item' }],
      visible: true,
      x: 100,
      y: 200,
    });
  });

  it('can hide a menu', () => {
    const { result } = renderHook(() => useMantineBetterMenus(), { wrapper });

    // First show a menu
    act(() => {
      result.current.show('test-menu', { x: 100, y: 200 });
    });

    expect(result.current.menus[0].visible).toBe(true);

    // Then hide it
    act(() => {
      result.current.hide('test-menu');
    });

    expect(result.current.menus[0].visible).toBe(false);
  });

  it('can update instance state', () => {
    const { result } = renderHook(() => useMantineBetterMenus(), { wrapper });

    // Show a menu
    act(() => {
      result.current.show('test-menu', { x: 100, y: 200 });
    });

    // Update its position
    act(() => {
      result.current.setInstanceState('test-menu', 'x', 300);
    });

    expect(result.current.menus[0].x).toBe(300);
    expect(result.current.menus[0].y).toBe(200); // Should remain unchanged
  });

  it('handles multiple menus', () => {
    const { result } = renderHook(() => useMantineBetterMenus(), { wrapper });

    act(() => {
      result.current.show('menu-1', { x: 100, y: 200 });
      result.current.show('menu-2', { x: 300, y: 400 });
    });

    expect(result.current.menus).toHaveLength(2);
    expect(result.current.menus.find((m) => m.id === 'menu-1')).toBeDefined();
    expect(result.current.menus.find((m) => m.id === 'menu-2')).toBeDefined();
  });
});