import { Dialog } from "../../src/components/ui/Dialog";
import { PHONE_VIEWPORT } from "../support/viewports";

// First component test for Dialog — until now it was only exercised
// indirectly through RecipePickerDialog's own e2e coverage. Added here
// specifically to prove `cy.setViewport()` (mobile/tablet UI chantier,
// ticket #83) works correctly in component-test mode too, not just e2e —
// and along the way, covers the phone full-screen treatment (ticket #91)
// that had no test of its own yet.

describe("Dialog — phone full-screen treatment", () => {
  it("is a centered, rounded panel with room around it at a desktop viewport", () => {
    // Component testing's own default viewport (unlike e2e's) is already
    // phone-sized — an explicit wide viewport here, not just "whatever the
    // default is", is what actually makes this the desktop case.
    const desktopWidth = 1280;
    cy.viewport(desktopWidth, 800);
    cy.mount(
      <Dialog title="Titre" onClose={() => {}}>
        Contenu
      </Dialog>,
    );

    cy.get(".dialog-panel").should(($el) => {
      const style = getComputedStyle($el[0]);
      expect(style.borderRadius).to.not.equal("0px");
      expect($el[0].getBoundingClientRect().width).to.be.lessThan(desktopWidth);
    });
  });

  it("goes edge-to-edge, with no rounding, at a phone viewport", () => {
    cy.setViewport("phone");
    cy.mount(
      <Dialog title="Titre" onClose={() => {}}>
        Contenu
      </Dialog>,
    );

    cy.get(".dialog-panel").should(($el) => {
      const style = getComputedStyle($el[0]);
      expect(style.borderRadius).to.equal("0px");
      const rect = $el[0].getBoundingClientRect();
      expect(rect.width).to.be.closeTo(PHONE_VIEWPORT.width, 1);
      expect(rect.height).to.be.closeTo(PHONE_VIEWPORT.height, 1);
    });
  });
});