import { render } from "@testing-library/react";
import { axe } from "vitest-axe";
import { Icon } from "../../Icon";
import { Expander } from "../Expander";

const example = (
  <>
    <Expander summary="Show details">Content</Expander>

    <Expander summary="Show details" summaryOpened="Hide details">
      Content
    </Expander>

    <Expander
      summary="Custom summary"
      renderSummary={({ summary }) => (
        <>
          <span>{summary}</span>
          <Icon name="accessibility-motor" data-summary-icon size="medium" />
        </>
      )}
    >
      Content
    </Expander>

    <Expander
      summary="Show details"
      summaryOpened="Hide details"
      renderSummaryOpened={({ summaryOpened }) => (
        <>
          <span>{summaryOpened}</span>
          <Icon name="birthday" size="large" color="danger" />
        </>
      )}
    >
      Content
    </Expander>

    <Expander summary="Expander with group" toggleGroup="test-group">
      Content
    </Expander>

    <Expander
      summary="Full width expander"
      toggleGroup="sync-group"
      isFullWidth
    >
      Content
    </Expander>

    <Expander summary="Open above trigger" placement="top">
      Content
    </Expander>
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate({
    rules: {
      "element-permitted-content": "off",
    },
  });
});

it("is accessible", async () => {
  const { container } = render(example);
  expect(await axe(container)).toHaveNoViolations();
});