import { vi } from 'vitest';
import UiSidebar from '../UiSidebar.vue';
import UiSidebarContent from '../UiSidebarContent.vue';
import UiSidebarProvider from '../UiSidebarProvider.vue';

/**
 * Desktop viewport for `useMediaQuery('(max-width: 768px)')` in `SidebarProvider` / `Sidebar`.
 * Call from `beforeEach`; pair with `vi.restoreAllMocks()` in `afterEach`.
 */
export function mockMatchMediaDesktop() {
  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    configurable: true,
    value: vi.fn().mockImplementation((query: string) => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: vi.fn(),
      removeListener: vi.fn(),
      addEventListener: vi.fn(),
      removeEventListener: vi.fn(),
      dispatchEvent: vi.fn(),
    })),
  });
}

/**
 * Provider + non-collapsing sidebar + content region (typical pattern shell).
 * @param innerTemplate
 * @param extraComponents
 */
export function createSidebarShell(
  innerTemplate: string,
  extraComponents: Record<string, unknown> = {},
) {
  return {
    components: {
      UiSidebarProvider,
      UiSidebar,
      UiSidebarContent,
      ...extraComponents,
    },
    template: `
      <UiSidebarProvider :default-open="true">
        <UiSidebar collapsible="none" class="min-h-32">
          <UiSidebarContent>
            ${innerTemplate}
          </UiSidebarContent>
        </UiSidebar>
      </UiSidebarProvider>
    `,
  };
}

/**
 * Provider + offcanvas sidebar (rail, desktop gap behavior).
 * @param innerTemplate
 * @param extraComponents
 */
export function createOffcanvasSidebar(
  innerTemplate: string,
  extraComponents: Record<string, unknown> = {},
) {
  return {
    components: {
      UiSidebarProvider,
      UiSidebar,
      ...extraComponents,
    },
    template: `
      <UiSidebarProvider :default-open="true">
        <UiSidebar collapsible="offcanvas" side="left" class="min-h-32">
          ${innerTemplate}
        </UiSidebar>
      </UiSidebarProvider>
    `,
  };
}
