// Named viewport presets for phone/tablet coverage — the mobile/tablet UI
// chantier's testing convention (ticket #83), shared by both the e2e and
// component support files (see e2e.ts/component.ts, each of which imports
// this once for its side effect of registering `cy.setViewport`).
//
// Sized from real, representative Android devices rather than Cypress's own
// built-in presets (`cy.viewport("iphone-x")` etc.) — this app is
// Android-only (see the root README), so an Apple-named preset would be a
// odd source of truth to borrow pixel values from. Comfortably inside
// `_breakpoints.scss`'s `$phone`/`$tablet` bands (not flush against either
// edge) so a test genuinely exercises "a phone" / "a tablet", not the exact
// boundary pixel.
export const PHONE_VIEWPORT = { width: 390, height: 844 } as const;
export const TABLET_VIEWPORT = { width: 900, height: 1200 } as const;

export type ViewportPreset = "phone" | "tablet";

declare global {
  namespace Cypress {
    interface Chainable {
      /** `cy.viewport(width, height)` for one of the mobile/tablet UI chantier's two named presets — see PHONE_VIEWPORT/TABLET_VIEWPORT above for the exact values. */
      setViewport(preset: ViewportPreset): Chainable<void>;
    }
  }
}

Cypress.Commands.add("setViewport", (preset: ViewportPreset) => {
  const { width, height } = preset === "phone" ? PHONE_VIEWPORT : TABLET_VIEWPORT;
  cy.viewport(width, height);
});