import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { DefaultPageDot } from '../DefaultPageDot';

describe('DefaultPageDot', () => {
  const mockOnClick = jest.fn();

  beforeEach(() => {
    mockOnClick.mockClear();
  });

  it('renders active dot', () => {
    render(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);

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

  it('renders inactive dot', () => {
    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);

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

  it('calls onClick when clicked', () => {
    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);

    const button = screen.getByRole('button');
    fireEvent.click(button);

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

  it('renders multiple dots with different indices', () => {
    const { rerender } = render(
      <DefaultPageDot active={true} onClick={mockOnClick} index={0} />
    );

    expect(screen.getByRole('button')).toBeInTheDocument();

    rerender(<DefaultPageDot active={false} onClick={mockOnClick} index={1} />);

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

  it('handles active state changes', () => {
    const { rerender } = render(
      <DefaultPageDot active={false} onClick={mockOnClick} index={0} />
    );

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

    rerender(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);

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

  it('applies different styling for active vs inactive state', () => {
    const { container, rerender } = render(
      <DefaultPageDot active={false} onClick={mockOnClick} index={0} />
    );

    const inactiveButton = container.querySelector('button');
    expect(inactiveButton).toBeInTheDocument();

    rerender(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);

    const activeButton = container.querySelector('button');
    expect(activeButton).toBeInTheDocument();
  });

  it('renders as a button element', () => {
    render(<DefaultPageDot active={true} onClick={mockOnClick} index={0} />);

    const button = screen.getByRole('button');
    expect(button.tagName).toBe('BUTTON');
  });

  it('passes correct index to onClick handler', () => {
    const { rerender } = render(
      <DefaultPageDot active={false} onClick={mockOnClick} index={2} />
    );

    const button = screen.getByRole('button');
    fireEvent.click(button);

    expect(mockOnClick).toHaveBeenCalledTimes(1);

    rerender(<DefaultPageDot active={false} onClick={mockOnClick} index={5} />);

    fireEvent.click(button);
    expect(mockOnClick).toHaveBeenCalledTimes(2);
  });

  it('is focusable for keyboard navigation', () => {
    render(<DefaultPageDot active={false} onClick={mockOnClick} index={0} />);

    const button = screen.getByRole('button');
    button.focus();
    expect(document.activeElement).toBe(button);
  });
});