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

describe('Section Tests', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<Section />);

    expect(container).toBeTruthy();
  });

  it('should not render anything if section has no children', () => {
    const { container } = render(<Section></Section>);

    const section = container.querySelector('.container');

    expect(section).not.toBeInTheDocument();
  });

  it('creates a class based off of the className prop', () => {
    const mockClassName = 'test-class';
    const { container } = render(
      <Section className={mockClassName}>
        <p>test</p>
      </Section>,
    );

    const item = container.querySelector('.test-class');

    expect(item?.classList.contains(mockClassName)).toBe(true);
  });

  it('accepts styles', () => {
    const mockStyles: React.CSSProperties = { backgroundColor: 'blue' };
    const { container } = render(
      <Section style={mockStyles}>
        <p>test</p>
      </Section>,
    );

    const section = container.querySelector('.container') as HTMLDivElement;

    expect(section.style.backgroundColor).toBe('blue');
  });

  it(`should not be toggleable if no 'title' is given`, () => {
    const { container } = render(
      <Section>
        <p>test</p>
      </Section>,
    );

    const accordionItem = container.querySelector(
      '[data-test-id="accordion-item"]',
    );

    expect(accordionItem).not.toBeInTheDocument();
  });

  it(`should be toggleable if a 'title' is given`, () => {
    const { container } = render(
      <Section title="test">
        <p>test</p>
      </Section>,
    );

    const accordionItem = container.querySelector(
      '[data-test-id="accordion-item"]',
    );

    expect(accordionItem).toBeInTheDocument();
  });

  it('section should be expanded by default', () => {
    const { container } = render(
      <Section>
        <p>test</p>
      </Section>,
    );

    const section = container.querySelector('.container');

    expect(section?.classList.contains('expanded')).toBe(true);
  });

  it(`section is collasped if 'expandedByDefault' is set to false`, () => {
    const { container } = render(
      <Section expandedByDefault={false}>
        <p>test</p>
      </Section>,
    );

    const section = container.querySelector('.container');

    expect(section?.classList.contains('expanded')).toBe(false);
  });

  it('section can be toggled when the title is clicked', () => {
    const { container, rerender } = render(
      <Section title="test">
        <p>test</p>
      </Section>,
    );

    let section = container.querySelector('.container');

    expect(section?.classList.contains('expanded')).toBe(true);

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

    section = container.querySelector('.container');
    expect(section?.classList.contains('expanded')).toBe(false);

    toggleButton.click();

    section = container.querySelector('.container');
    expect(section?.classList.contains('expanded')).toBe(true);
  });
});
