import { render, screen, fireEvent } from "@testing-library/react";
import { Box } from "../box";
import { Text } from "../text";

import { Accordion } from "./index";
import type { AccordionItemsProps } from "./index";

export const mockAccordionItem: AccordionItemsProps = [
  {
    value: "header_1",
    header: <Text variant="h1">Header 1</Text>,
    body: (
      <Box>
        <Text variant="body2">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam
        </Text>
      </Box>
    ),
  },
  {
    value: "header_2",
    header: <Text variant="h1">Header 2</Text>,
    body: (
      <Box>
        <Text variant="body2">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</Text>
      </Box>
    ),
  },
  {
    value: "header_3",
    header: <Text variant="h1">Header 3</Text>,
    body: (
      <Box>
        <Text variant="body2">Lorem ipsum dolor sit amet</Text>
      </Box>
    ),
  },
];

describe("Accordion", () => {
  it("should display all the headers", async () => {
    render(<Accordion type="single" items={mockAccordionItem} />);

    expect(screen.getByText("Header 1")).toBeInTheDocument();
    expect(screen.getByText("Header 2")).toBeInTheDocument();
    expect(screen.getByText("Header 3")).toBeInTheDocument();
  });

  it("should display and hide the content when header is clicked", () => {
    render(<Accordion type="single" items={mockAccordionItem} />);
    const header = screen.getByText("Header 3");
    const anotherHeader = screen.getByText("Header 2");

    fireEvent.click(header);
    expect(screen.getByText("Lorem ipsum dolor sit amet")).toBeInTheDocument();

    fireEvent.click(anotherHeader);
    expect(screen.queryByText("Lorem ipsum dolor sit amet")).not.toBeInTheDocument();
    expect(
      screen.getByText("Lorem ipsum dolor sit amet, consectetur adipiscing elit,")
    ).toBeInTheDocument();
  });
});