// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
// eslint-disable-next-line @typescript-eslint/no-namespace
declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
    interface Chainable<Subject> {
      commonViewport(type: VPTypes, ratio?: VPRatios): Chainable<null>;
    }
  }
}
//
// -- This is a parent command --

const viewPortSizes = {
  'mobile-min': 320,
  'mobile-max': 767,
  'tablet-min': 768,
  'tablet-max': 1279,
  'pc-min': 1280,
  'pc-normal': 1920,
} as const;
export type VPTypes = keyof typeof viewPortSizes;
export type VPRatios = '16:9' | '16:10';

Cypress.Commands.add('commonViewport', (type: VPTypes, ratio: VPRatios = '16:9') => {
  const width = viewPortSizes[type];
  const [widthRatio, heightRatio] = ratio.split(':').map(Number);
  const height = (width / widthRatio) * heightRatio;
  return cy.viewport(width, height);
});
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
