import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';

const Example = () => (
  <Tabs defaultValue="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="activity">Activity</TabsTrigger>
      <TabsTrigger value="billing" disabled>
        Billing
      </TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Overview panel</TabsContent>
    <TabsContent value="activity">Activity panel</TabsContent>
    <TabsContent value="billing">Billing panel</TabsContent>
  </Tabs>
);

describe('Tabs', () => {
  /*
   * The list carries the shape and the trigger reads it back through
   * `group-data-*`, so these attributes are the contract between the two —
   * dropping one silently falls the triggers back to the default look.
   */
  describe('shape is published on the list', () => {
    it('exposes the variant and size the triggers style themselves from', () => {
      render(
        <Tabs defaultValue="a">
          <TabsList variant="outline" size="lg" colorPalette="red">
            <TabsTrigger value="a">A</TabsTrigger>
          </TabsList>
          <TabsContent value="a">Panel</TabsContent>
        </Tabs>
      );

      const list = screen.getByRole('tablist');
      expect(list).toHaveAttribute('data-variant', 'outline');
      expect(list).toHaveAttribute('data-size', 'lg');
      expect(list).toHaveClass('palette-red');
    });

    it('defaults to CBAR’s line strip on the secondary palette', () => {
      render(<Example />);

      const list = screen.getByRole('tablist');
      expect(list).toHaveAttribute('data-variant', 'line');
      expect(list).toHaveAttribute('data-size', 'md');
      expect(list).toHaveClass('palette-secondary');
    });
  });

  it('renders only the selected panel', () => {
    render(<Example />);

    expect(screen.getByText('Overview panel')).toBeInTheDocument();
    expect(screen.queryByText('Activity panel')).not.toBeInTheDocument();
  });

  it('switches panels on click', async () => {
    render(<Example />);

    await userEvent.click(screen.getByRole('tab', { name: 'Activity' }));

    expect(screen.getByText('Activity panel')).toBeInTheDocument();
    expect(screen.queryByText('Overview panel')).not.toBeInTheDocument();
  });

  it('moves between tabs with the arrow keys', async () => {
    render(<Example />);

    await userEvent.click(screen.getByRole('tab', { name: 'Overview' }));
    await userEvent.keyboard('{ArrowRight}');

    expect(screen.getByRole('tab', { name: 'Activity' })).toHaveAttribute(
      'aria-selected',
      'true'
    );
  });

  it('skips a disabled tab', async () => {
    render(<Example />);

    await userEvent.click(screen.getByRole('tab', { name: 'Billing' }));

    expect(screen.getByText('Overview panel')).toBeInTheDocument();
  });
});