import '@testing-library/jest-dom/vitest';
import { render, waitFor } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, expect, test } from 'vitest';
import {
  UiSelect,
  UiSelectTrigger,
  UiSelectContent,
  UiSelectItem,
  UiSelectValue,
  UiSelectLabel,
  UiSelectGroup,
} from '../index';

describe('UiSelectGroup', () => {
  test('renders group with label and items', async () => {
    const user = userEvent.setup();
    const { getByRole, getByText, getAllByRole } = render({
      components: {
        UiSelect,
        UiSelectTrigger,
        UiSelectContent,
        UiSelectItem,
        UiSelectValue,
        UiSelectLabel,
        UiSelectGroup,
      },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectGroup>
              <UiSelectLabel>Fruits</UiSelectLabel>
              <UiSelectItem value="apple">Apple</UiSelectItem>
              <UiSelectItem value="banana">Banana</UiSelectItem>
            </UiSelectGroup>
          </UiSelectContent>
        </UiSelect>
      `,
    });

    await user.click(getByRole('combobox'));

    await waitFor(() => {
      expect(getByText('Fruits')).toBeInTheDocument();
      expect(getAllByRole('option')).toHaveLength(2);
    });
  });

  test('applies custom class', async () => {
    const user = userEvent.setup();
    const { getByRole } = render({
      components: {
        UiSelect,
        UiSelectTrigger,
        UiSelectContent,
        UiSelectItem,
        UiSelectValue,
        UiSelectLabel,
        UiSelectGroup,
      },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectGroup class="bg-background-surface-muted" data-testid="group">
              <UiSelectLabel>Fruits</UiSelectLabel>
              <UiSelectItem value="apple">Apple</UiSelectItem>
            </UiSelectGroup>
          </UiSelectContent>
        </UiSelect>
      `,
    });

    await user.click(getByRole('combobox'));

    await waitFor(() => {
      expect(getByRole('group')).toHaveClass('bg-background-surface-muted');
    });
  });
});
