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

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

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

  it('renders left arrow', () => {
    render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    const button = screen.getByLabelText('Previous items');
    expect(button).toBeInTheDocument();
  });

  it('renders right arrow', () => {
    render(
      <DefaultNavigationArrow
        direction="right"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    const button = screen.getByLabelText('Next items');
    expect(button).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    const button = screen.getByLabelText('Previous items');
    fireEvent.click(button);

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

  it('does not call onClick when disabled', () => {
    render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={true}
      />
    );

    const button = screen.getByLabelText('Previous items');
    fireEvent.click(button);

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

  it('applies disabled styling when disabled', () => {
    render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={true}
      />
    );

    const button = screen.getByLabelText('Previous items');
    expect(button).toHaveAttribute('disabled');
  });

  it('renders SVG icon', () => {
    const { container } = render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={false}
      />
    );

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

  it('has correct aria-label for accessibility', () => {
    const { rerender } = render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    expect(screen.getByLabelText('Previous items')).toBeInTheDocument();

    rerender(
      <DefaultNavigationArrow
        direction="right"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    expect(screen.getByLabelText('Next items')).toBeInTheDocument();
  });

  it('renders as a button element', () => {
    render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    const button = screen.getByLabelText('Previous items');
    expect(button.tagName).toBe('BUTTON');
  });

  it('applies correct styles based on direction', () => {
    const { container, rerender } = render(
      <DefaultNavigationArrow
        direction="left"
        onClick={mockOnClick}
        disabled={false}
      />
    );

    let button = container.querySelector('button');
    expect(button).toBeInTheDocument();

    rerender(
      <DefaultNavigationArrow
        direction="right"
        onClick={mockOnClick}
        disabled={false}
      />
    );

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