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

import { Button } from "../../Button";
import { Modal, ModalProductHeader } from "../";

const example = (
  <>
    <div id="root">
      <Button data-a11y-dialog-show="modal" data-test-id="open-button">
        Open
      </Button>
      <Modal id="modal" title="Modal title">
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
          lacinia odio sem nec elit. Integer posuere erat a ante venenatis
          dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies
          vehicula ut id elit. Donec sed odio dui. Maecenas faucibus mollis
          interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </Modal>
      <Modal id="modal-with-product-header" title="Modal with Product Header">
        <ModalProductHeader image={<div>Product Image</div>}>
          <h3>Product Title</h3>
          <p>Product description</p>
        </ModalProductHeader>
        <p>Modal content</p>
      </Modal>
    </div>
    <div id="root-modals" />
  </>
);

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

it("is accessible", async () => {
  window.scrollTo = vi.fn();
  const { container } = render(example);

  fireEvent.click(container.querySelector('[data-test-id="open-button"]'));
  expect(await axe(container)).toHaveNoViolations();
});