import { render } from '@testing-library/vue';
import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
import UiSidebarGroup from '../UiSidebarGroup.vue';
import UiSidebarGroupContent from '../UiSidebarGroupContent.vue';
import UiSidebarMenuSubItem from '../UiSidebarMenuSubItem.vue';
import UiSidebarSub from '../UiSidebarSub.vue';
import {
  createSidebarShell,
  mockMatchMediaDesktop,
} from './sidebar-test-helpers';

beforeEach(() => mockMatchMediaDesktop());
afterEach(() => vi.restoreAllMocks());

describe('UiSidebarSub', () => {
  test('border variant renders decorative rail before menu sub', () => {
    const { container } = render(
      createSidebarShell(
        `
        <UiSidebarGroup>
          <UiSidebarGroupContent>
            <UiSidebarSub variant="border">
              <UiSidebarMenuSubItem>A</UiSidebarMenuSubItem>
            </UiSidebarSub>
          </UiSidebarGroupContent>
        </UiSidebarGroup>
      `,
        {
          UiSidebarGroup,
          UiSidebarGroupContent,
          UiSidebarMenuSubItem,
          UiSidebarSub,
        },
      ),
    );
    const menuSub = container.querySelector('[data-sidebar="menu-sub"]');
    expect(menuSub?.previousElementSibling?.getAttribute('aria-hidden')).toBe(
      'true',
    );
    expect(menuSub).toBeTruthy();
  });

  test('default variant renders menu sub with horizontal padding and no rail sibling', () => {
    const { container } = render(
      createSidebarShell(
        `
        <UiSidebarGroup>
          <UiSidebarGroupContent>
            <UiSidebarSub variant="default">
              <UiSidebarMenuSubItem>B</UiSidebarMenuSubItem>
            </UiSidebarSub>
          </UiSidebarGroupContent>
        </UiSidebarGroup>
      `,
        {
          UiSidebarGroup,
          UiSidebarGroupContent,
          UiSidebarMenuSubItem,
          UiSidebarSub,
        },
      ),
    );
    const menuSub = container.querySelector('[data-sidebar="menu-sub"]');
    expect(menuSub?.previousElementSibling).toBeNull();
    expect(menuSub?.className).toMatch(/px-6/);
    expect(menuSub?.className).toMatch(/ui-sidebar-sub/);
  });
});
