import { screen, mockMatchMedia, userEvent } from '../../test-utils';
import { Button as ItemButton } from './ListItemButton';
import { ButtonPriority } from '../../button/Button.types';
import { renderWithListItemContext, clearListItemMocks, mockSetControlType } from '../test-utils';

mockMatchMedia();

describe('ItemButton', () => {
  beforeEach(() => {
    clearListItemMocks();
  });

  it('always sets v2 to true', () => {
    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
    const button = screen.getByRole('button');
    expect(button).toBeInTheDocument();
    expect(mockSetControlType).toHaveBeenCalledWith('button');
  });

  it('always sets size to "sm"', () => {
    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
    const button = screen.getByRole('button');
    expect(button).toHaveClass('wds-Button--small');
  });

  it('supports all priorities', () => {
    const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
    priorities.forEach((priority) => {
      renderWithListItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
      const button = screen.getByRole('button', { name: `Test ${priority}` });
      expect(button).toBeInTheDocument();
    });
  });

  it('renders as a button by default', () => {
    renderWithListItemContext(<ItemButton>Click me</ItemButton>);
    const button = screen.getByRole('button');
    expect(button).toBeInTheDocument();
    expect(button.tagName).toBe('BUTTON');
  });

  it('renders as an anchor when href is provided', () => {
    renderWithListItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
    const link = screen.getByRole('link', { name: 'Go to Example' });
    expect(link).toBeInTheDocument();
    expect(link.tagName).toBe('A');
    expect(link).toHaveAttribute('href', 'https://example.com');
  });

  it('spreads additional props to the button', () => {
    renderWithListItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
    const button = screen.getByRole('button', { name: 'Custom Button' });
    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute('aria-label', 'Custom Button');
  });

  it('spreads additional props to the anchor', () => {
    renderWithListItemContext(
      <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
        Custom Link
      </ItemButton>,
    );
    const link = screen.getByRole('link', { name: 'Custom Link' });
    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute('href', 'https://example.com');
    expect(link).toHaveAttribute('target', '_blank');
  });

  describe('onClick', () => {
    it('handles onClick events when rendered as HTML button', async () => {
      const handleClick = jest.fn();
      renderWithListItemContext(<ItemButton onClick={handleClick}>Go to Example</ItemButton>);

      await userEvent.click(screen.getByRole('button'));
      expect(handleClick).toHaveBeenCalledTimes(1);
    });

    it('handles onClick events when rendered as HTML anchor', async () => {
      const handleClick = jest.fn();
      renderWithListItemContext(
        <ItemButton href="#target" onClick={handleClick}>
          Go to Example
        </ItemButton>,
      );

      await userEvent.click(screen.getByRole('link'));
      expect(handleClick).toHaveBeenCalledTimes(1);
    });
  });
});