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

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

describe('AccordionItem', () => {
  const header = <span>Header</span>;
  const content = <div>Accordion Content</div>;

  it('renders header and children', () => {
    render(<AccordionItem header={header}>{content}</AccordionItem>);
    expect(screen.getByText('Header')).toBeInTheDocument();
    expect(screen.getByText('Accordion Content')).toBeInTheDocument();
  });

  it('calls toggleExpanded when row is clicked', () => {
    const toggleExpanded = vi.fn();
    render(
      <AccordionItem header={header} toggleExpanded={toggleExpanded}>
        {content}
      </AccordionItem>,
    );
    fireEvent.click(screen.getByTestId('accordion-item-row'));
    expect(toggleExpanded).toHaveBeenCalled();
  });

  it('shows expanded styles and rotates icon when isExpanded is true', () => {
    render(
      <AccordionItem header={header} isExpanded>
        {content}
      </AccordionItem>,
    );
    const row = screen.getByTestId('accordion-item-row');
    expect(row.className).toMatch(/rowExpanded/);
    const button = row.querySelector('button');
    expect(button?.className).toMatch(/rotated/);
    const contentDiv = screen.getByTestId('accordion-item-content');
    expect(contentDiv.className).toMatch(/expanded/);
  });

  it('applies sticky class when sticky is true', () => {
    render(
      <AccordionItem header={header} sticky>
        {content}
      </AccordionItem>,
    );
    const row = screen.getByTestId('accordion-item-row');
    expect(row.className).toMatch(/sticky/);
  });

  it('does not add left spacing when allowLeftSpacing is false', () => {
    render(
      <AccordionItem header={header} allowLeftSpacing={false}>
        {content}
      </AccordionItem>,
    );
    const contentDiv = screen.getByText('Accordion Content').parentElement;
    expect(contentDiv).toHaveStyle('grid-template-columns: 1fr');
  });

  it('applies custom className to root element', () => {
    render(
      <AccordionItem header={header} className="custom-class">
        {content}
      </AccordionItem>,
    );
    expect(screen.getByTestId('accordion-item').className).toContain(
      'custom-class',
    );
  });
});
