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

function renderWithTheme(element: React.ReactElement) {
  return render(<MoexVibeThemeProvider>{element}</MoexVibeThemeProvider>);
}

describe('Chip', () => {
  it('renders label', () => {
    renderWithTheme(<Chip label="Default" />);
    expect(screen.getByText('Default')).toBeInTheDocument();
  });

  it('renders with neutral tone by default', () => {
    renderWithTheme(<Chip label="Neutral" />);
    const chip = screen.getByText('Neutral').closest('.MuiChip-root')!;
    expect(chip.classList.contains('MuiChip-filled')).toBe(true);
  });

  it('renders info tone', () => {
    renderWithTheme(<Chip label="Info" tone="info" />);
    expect(screen.getByText('Info')).toBeInTheDocument();
  });

  it('renders success tone', () => {
    renderWithTheme(<Chip label="Success" tone="success" />);
    expect(screen.getByText('Success')).toBeInTheDocument();
  });

  it('renders warning tone', () => {
    renderWithTheme(<Chip label="Warning" tone="warning" />);
    expect(screen.getByText('Warning')).toBeInTheDocument();
  });

  it('renders error tone', () => {
    renderWithTheme(<Chip label="Error" tone="error" />);
    expect(screen.getByText('Error')).toBeInTheDocument();
  });

  it('shows delete button when onDelete provided', () => {
    renderWithTheme(<Chip label="Removable" onDelete={() => {}} />);
    const deleteIcon = screen.getByLabelText('Remove Removable');
    expect(deleteIcon).toBeInTheDocument();
  });

  it('calls onDelete when delete clicked', async () => {
    const handleDelete = vi.fn();
    const user = userEvent.setup();
    renderWithTheme(<Chip label="Removable" onDelete={handleDelete} />);
    const deleteIcon = screen.getByLabelText('Remove Removable');
    await user.click(deleteIcon);
    expect(handleDelete).toHaveBeenCalledTimes(1);
  });

  it('does not show delete button without onDelete', () => {
    renderWithTheme(<Chip label="Static" />);
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });
});