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('UiSelectLabel', () => {
  test('renders label text in group', async () => {
    const user = userEvent.setup();
    const { getByRole, getByText } = render({
      components: {
        UiSelect,
        UiSelectTrigger,
        UiSelectContent,
        UiSelectItem,
        UiSelectValue,
        UiSelectLabel,
        UiSelectGroup,
      },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectGroup>
              <UiSelectLabel>Category</UiSelectLabel>
              <UiSelectItem value="item1">Item 1</UiSelectItem>
            </UiSelectGroup>
          </UiSelectContent>
        </UiSelect>
      `,
    });

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

    await waitFor(() => {
      expect(getByText('Category')).toBeInTheDocument();
    });
  });

  test('applies custom class', async () => {
    const user = userEvent.setup();
    const { getByRole, getByText } = render({
      components: {
        UiSelect,
        UiSelectTrigger,
        UiSelectContent,
        UiSelectItem,
        UiSelectValue,
        UiSelectLabel,
        UiSelectGroup,
      },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectGroup>
              <UiSelectLabel class="text-primary">Category</UiSelectLabel>
              <UiSelectItem value="item1">Item 1</UiSelectItem>
            </UiSelectGroup>
          </UiSelectContent>
        </UiSelect>
      `,
    });

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

    await waitFor(() => {
      expect(getByText('Category')).toHaveClass('text-primary');
    });
  });
});
