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

import { Button } from "../../../Button";
import { Field } from "..";

const example = (
  <>
    <Field
      label="Field Label"
      control={{
        type: "group",
        id: "group-field-1",
        prefix: "€",
        suffix: ["kg", <Button key="test">Send</Button>],
        control: { type: "text", id: "text-field-1" },
      }}
    />
    <Field
      label="Field Label"
      control={{
        type: "group",
        id: "group-field-2",
        prefix: "€",
        suffix: ["kg", <Button key="test">Send</Button>],
        control: { type: "text", id: "text-field-2" },
      }}
      tooltip="info tooltip"
    />
    <Field
      label="Field Label"
      hint="Field hint with long text"
      control={{
        type: "group",
        id: "group-field-3",
        prefix: "€",
        suffix: ["kg", <Button key="test">Send</Button>],
        control: { type: "text", id: "text-field-3" },
      }}
    />
    <Field
      label="Field Label"
      control={{
        type: "group",
        id: "group-field-4",
        prefix: "€",
        suffix: ["kg", <Button key="test">Send</Button>],
        control: { type: "text", id: "text-field-4" },
      }}
      messages={[
        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
      ]}
    />
    <div id="root-tooltips" />
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate({
    rules: {
      "no-inline-style": "off",
      "attribute-boolean-style": "off",
      "attribute-empty-style": "off",
    },
  });
});

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