// ***********************************************
// This example commands.ts 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
// ***********************************************

// -- This is a parent command --
Cypress.Commands.add('login', (email, password) => {
  // Implementation example for a login command
  cy.visit('/login')
  cy.get('[data-cy=email]').type(email)
  cy.get('[data-cy=password]').type(password)
  cy.get('[data-cy=submit]').click()
})

// -- This is a child command --
Cypress.Commands.add('getByDataCy', { prevSubject: 'element' }, (subject, value) => {
  return cy.wrap(subject).find(`[data-cy=${value}]`)
})

// -- This is a dual command --
Cypress.Commands.add('getByTestId', { prevSubject: 'optional' }, (subject, value) => {
  return subject 
    ? cy.wrap(subject).find(`[data-testid=${value}]`) 
    : cy.get(`[data-testid=${value}]`)
})

// -- Example command for chart testing --
Cypress.Commands.add('getChartCanvas', (selector = 'canvas') => {
  return cy.get(selector)
})

// Declare the types for the custom commands
declare global {
  namespace Cypress {
    interface Chainable {
      login(email: string, password: string): Chainable<void>
      getByDataCy(value: string): Chainable<JQuery<HTMLElement>>
      getByTestId(value: string): Chainable<JQuery<HTMLElement>>
      getChartCanvas(selector?: string): Chainable<JQuery<HTMLElement>>
    }
  }
}

export {}