import { mount } from '@vue/test-utils';
import VTabPanel from './VTabPanel.vue';
import { TabsProviderKey } from './types';
import { ref } from 'vue';
import type { TabId, TabsContext } from './types';

// Mock a VTabs provider for VTabPanel tests
const mockTabsContext = (activeTabIdValue: TabId | null = 'panelTest1'): TabsContext => ({
  activeTabId: ref(activeTabIdValue),
  selectTab: vi.fn(), // Not used by VTabPanel, but part of context
});

describe('VTabPanel.vue', () => {
  it('renders default slot content', () => {
    const panelContent = '<div>Panel Content Here</div>';
    const wrapper = mount(VTabPanel, {
      props: { id: 'panel1' },
      slots: { default: panelContent },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext('panel1') } },
    });
    expect(wrapper.html()).toContain(panelContent);
  });

  it('is visible when its id matches activeTabId (isActive is true)', () => {
    const wrapper = mount(VTabPanel, {
      props: { id: 'activePanel' },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext('activePanel') } },
    });
    // v-show means the element is still rendered, but display: none is applied by Vue if false
    expect(wrapper.vm.isActive).toBe(true);
    expect(wrapper.element.style.display).not.toBe('none');
  });

  it('is hidden (display: none) when its id does not match activeTabId (isActive is false)', () => {
    const wrapper = mount(VTabPanel, {
      props: { id: 'inactivePanel' },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext('someOtherActivePanel') } },
    });
    expect(wrapper.vm.isActive).toBe(false);
    // Vue applies display: none for v-show="false"
    // Note: this might be an internal detail of Vue's v-show.
    // A more robust test might be to check `wrapper.isVisible()` if available and configured.
    // For now, checking the style attribute is a common way.
    expect(wrapper.element.style.display).toBe('none');
  });

  it('sets ARIA attributes correctly', () => {
    const panelId = 'infoPanel';
    const wrapper = mount(VTabPanel, {
      props: { id: panelId },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext(panelId) } },
    });
    expect(wrapper.attributes('role')).toBe('tabpanel');
    expect(wrapper.attributes('id')).toBe(`panel-${panelId}`);
    expect(wrapper.attributes('aria-labelledby')).toBe(`tab-${panelId}`);
    expect(wrapper.attributes('tabindex')).toBe('0'); // Panel should be focusable
  });

  it('applies .tab-content class', () => {
    const wrapper = mount(VTabPanel, {
      props: { id: 'anyPanel' },
      global: { provide: { [TabsProviderKey as any]: mockTabsContext('anyPanel') } },
    });
    expect(wrapper.classes()).toContain('tab-content');
  });

  it('throws error if not used within VTabs (no context provided)', () => {
    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(()_ => {});
    expect(() => mount(VTabPanel, { props: { id: 'panel1' } })).toThrow('VTabPanel must be used within a VTabs component.');
    consoleErrorSpy.mockRestore();
  });
});
