import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from './command';
import React from 'react';

describe('Command', () => {
  it('renders correctly', () => {
    render(
      <Command>
        <CommandInput placeholder="Type a command..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>Calendar</CommandItem>
            <CommandItem>Search Emoji</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    );

    expect(screen.getByPlaceholderText('Type a command...')).toBeInTheDocument();
    expect(screen.getByText('Calendar')).toBeInTheDocument();
    expect(screen.getByText('Search Emoji')).toBeInTheDocument();
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Command>
        <CommandInput />
        <CommandList>
          <CommandItem>Item</CommandItem>
        </CommandList>
      </Command>
    );

    expect(container.querySelector('[data-slot="command"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="command-input"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="command-list"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="command-item"]')).toBeInTheDocument();
  });

  it('filters the command list to matching items as the user types', async () => {
    const user = userEvent.setup();
    render(
      <Command>
        <CommandInput placeholder="Type a command..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>Calendar</CommandItem>
            <CommandItem>Search Emoji</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    );

    const input = screen.getByPlaceholderText('Type a command...');

    // Before typing, both items are present.
    expect(screen.getByText('Calendar')).toBeInTheDocument();
    expect(screen.getByText('Search Emoji')).toBeInTheDocument();

    await user.type(input, 'Calendar');

    // cmdk unmounts non-matching items from the DOM rather than hiding them.
    await waitFor(() => {
      expect(screen.getByText('Calendar')).toBeInTheDocument();
      expect(screen.queryByText('Search Emoji')).not.toBeInTheDocument();
    });
  });

  it('shows the empty state when no items match the query', async () => {
    const user = userEvent.setup();
    render(
      <Command>
        <CommandInput placeholder="Type a command..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>Calendar</CommandItem>
            <CommandItem>Search Emoji</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    );

    const input = screen.getByPlaceholderText('Type a command...');
    await user.type(input, 'zzzzz');

    await waitFor(() => {
      expect(screen.getByText('No results found.')).toBeInTheDocument();
      expect(screen.queryByText('Calendar')).not.toBeInTheDocument();
      expect(screen.queryByText('Search Emoji')).not.toBeInTheDocument();
    });
  });
});