import { configure, fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Accordion } from './Accordion';
import { AccordionItem } from './AccordionItem/AccordionItem';

configure({ testIdAttribute: 'data-test-id' });

describe('Accordion', () => {
  it('renders the component without crashing', () => {
    render(<Accordion />);

    expect(screen.getByTestId('accordion')).toBeInTheDocument();
  });

  it('renders the component header', () => {
    render(<Accordion header={<b>Header</b>} />);
    expect(screen.getByTestId('accordion-header')).toBeInTheDocument();
  });

  it('does not render a header when the prop is not provided', () => {
    render(<Accordion />);
    expect(screen.queryByTestId('accordion-header')).not.toBeInTheDocument();
  });

  it('expands / collapses all children when the button is clicked', () => {
    render(
      <Accordion header={<b>Header</b>}>
        <AccordionItem header={<b>Item 1</b>}>
          <p>Content 1</p>
        </AccordionItem>
        <AccordionItem header={<b>Item 2</b>}>
          <p>Content 2</p>
        </AccordionItem>
        <AccordionItem header={<b>Item 3</b>}>
          <p>Content 3</p>
        </AccordionItem>
      </Accordion>,
    );

    // Find the expand/collapse all button (assuming it's the first button in header)
    const headerButton = screen.getByTestId('accordion-toggle-all');
    fireEvent.click(headerButton);

    // All items should be expanded (content visible)
    let rows = screen.getAllByTestId('accordion-item-content');
    expect(rows).toHaveLength(3);

    rows.forEach((row) => {
      expect(row).toHaveClass('expanded');
    });

    fireEvent.click(headerButton);

    // All items should be collapsed (content not visible)
    rows = screen.getAllByTestId('accordion-item-content');
    expect(rows).toHaveLength(3);

    rows.forEach((row) => {
      expect(row).not.toHaveClass('expanded');
    });
  });

  it('displays rotated ChevronRight icon when one or more children are expanded', () => {
    render(
      <Accordion header={<b>Header</b>}>
        <AccordionItem header={<b>Item 1</b>}>
          <p>Content 1</p>
        </AccordionItem>
        <AccordionItem header={<b>Item 2</b>}>
          <p>Content 2</p>
        </AccordionItem>
        <AccordionItem header={<b>Item 3</b>}>
          <p>Content 3</p>
        </AccordionItem>
      </Accordion>,
    );

    // The button in the header should have the ChevronRight icon and not be rotated initially
    const headerButton = screen.getByTestId('accordion-toggle-all');
    expect(headerButton.querySelector('.rotated')).not.toBeInTheDocument();

    // Expand the last item
    const lastItemButton = screen.getAllByRole('button')[2];
    fireEvent.click(lastItemButton);

    // Now the header button should have the rotated class
    expect(headerButton).toHaveClass('rotated');

    // Collapse the last item
    fireEvent.click(lastItemButton);

    // The header button should not have the rotated class anymore
    expect(headerButton).not.toHaveClass('rotated');
  });

  it('disables the expand/collapse all button when there are no children', () => {
    render(<Accordion header={<b>Header</b>} />);

    // The button should be disabled when there are no children
    const headerButton = screen.getByTestId('accordion-toggle-all');
    expect(headerButton).toBeDisabled();
  });
});
