import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { render, cleanup, screen } from "@testing-library/react";
import {
  fontSizes,
  fontWeights,
  spacing
} from "@gympass/yoga-tokens/src/global";
import { Text, Button, ThemeProvider, v3theme } from "../..";
import Accordion from ".";
describe("<Accordion />", () => {
  afterEach(cleanup);
  describe("should correctly render", () => {
    it("the default version", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Default", expanded: true, children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByText("Default")).toBeInTheDocument();
      expect(screen.getByText("Default")).toHaveStyle({
        fontSize: `${fontSizes.medium}px`,
        fontWeight: fontWeights.medium
      });
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.large}px ${spacing.medium}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
    it("the default version with v3Theme", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { theme: v3theme, children: /* @__PURE__ */ jsx(Accordion, { title: "Default", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByText("Default")).toBeInTheDocument();
      expect(screen.getByText("Default")).toHaveStyle({
        fontSize: `${fontSizes.medium}px`,
        fontWeight: fontWeights.bold
      });
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.large}px ${spacing.medium}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
    it("the small version", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion.Small, { title: "Small", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByText("Small")).toBeInTheDocument();
      expect(screen.getByText("Small")).toHaveStyle({
        fontSize: `${fontSizes.small}px`,
        fontWeight: fontWeights.regular
      });
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.small}px ${spacing.medium}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
    it("the default version with subtitle", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Default", subtitle: "default with subtitle", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByText("Default")).toBeInTheDocument();
      expect(screen.getByText("default with subtitle")).toBeInTheDocument();
      expect(screen.getByText("Default")).toHaveStyle({
        fontSize: `${fontSizes.medium}px`,
        fontWeight: fontWeights.medium
      });
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.large}px ${spacing.medium}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
    it("the small version with subtitle", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion.Small, { title: "Small", subtitle: "small with subtitle", children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByText("Small")).toBeInTheDocument();
      expect(screen.getByText("small with subtitle")).toBeInTheDocument();
      expect(screen.getByText("Small")).toHaveStyle({
        fontSize: `${fontSizes.small}px`,
        fontWeight: fontWeights.regular
      });
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.small}px ${spacing.medium}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
    it("the default version without side padding", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Default", expanded: true, hasHorizontalPadding: false, children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.large}px ${spacing.zero}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
    it("the small version without side padding", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion.Small, { title: "Small", hasHorizontalPadding: false, children: /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) }) }) })
      );
      expect(screen.getByRole("button")).toHaveStyle({
        padding: `${spacing.small}px ${spacing.zero}px`
      });
      expect(container.firstChild).toMatchSnapshot();
    });
  });
  it("should render the accordion summary", () => {
    render(
      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Accordion, { title: "Title", subtitle: "Subtitle", children: [
        /* @__PURE__ */ jsx(Accordion.Summary, { children: /* @__PURE__ */ jsx(Text, { children: "Summary" }) }),
        /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) })
      ] }) })
    );
    expect(screen.getByText("Summary")).toBeInTheDocument();
    expect(screen.queryByText("Title")).not.toBeInTheDocument();
    expect(screen.queryByText("Subtitle")).not.toBeInTheDocument();
  });
  it("should have className when passed as props", () => {
    render(
      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Accordion, { title: "Title", children: /* @__PURE__ */ jsxs(
        Accordion.Content,
        {
          className: "className-as-props",
          "data-testid": "accordion-content",
          children: [
            /* @__PURE__ */ jsx(Text, { children: "Content" }),
            /* @__PURE__ */ jsx(Button, { small: true, inverted: true, children: "Small button" })
          ]
        }
      ) }) })
    );
    expect(screen.getByTestId("accordion-content")).toHaveClass(
      "className-as-props"
    );
  });
});
