import React from 'react';
import { render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import '@testing-library/jest-dom';
import { describe, test, expect, vi } from 'vitest';
import ReloadButton from './ReloadButton.js';

describe('ReloadButton', () => {
  test('renders a button', () => {
    render(<ReloadButton />);

    const button = screen.getByRole('button');
    expect(button).toBeInTheDocument();
  });

  test('applies reload-icon class', () => {
    render(<ReloadButton />);

    const button = screen.getByRole('button');
    expect(button).toHaveClass('reload-icon');
  });

  test('calls onClick when clicked', async () => {
    const user = userEvent.setup();
    const handleClick = vi.fn();

    render(<ReloadButton onClick={handleClick} />);

    const button = screen.getByRole('button');
    await user.click(button);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  test('works without onClick prop', async () => {
    const user = userEvent.setup();

    render(<ReloadButton />);

    const button = screen.getByRole('button');
    await user.click(button);

    expect(button).toBeInTheDocument();
  });

  test('is enabled by default', () => {
    render(<ReloadButton />);

    const button = screen.getByRole('button');
    expect(button).toBeEnabled();
  });

  test('can be disabled', () => {
    render(<ReloadButton disabled={true} />);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  test('does not call onClick when disabled', async () => {
    const user = userEvent.setup();
    const handleClick = vi.fn();

    render(<ReloadButton onClick={handleClick} disabled={true} />);

    const button = screen.getByRole('button');
    await user.click(button);

    expect(handleClick).not.toHaveBeenCalled();
  });

  test('passes through additional props', () => {
    render(<ReloadButton aria-label="Reload content" data-testid="reload-btn" />);

    const button = screen.getByRole('button', { name: 'Reload content' });
    expect(button).toHaveAttribute('data-testid', 'reload-btn');
  });
});
