// ***********************************************
// 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)
})

// -- Command to select an option from a multiselect dropdown --
Cypress.Commands.add('selectMultiselectOption', (selectId, optionText) => {
  cy.get(`#${selectId}`).click()
  cy.get('.multiselect__content-wrapper').contains(optionText).click()
})

// -- Command to wait for chart to load and be visible --
Cypress.Commands.add('waitForChart', () => {
  cy.get('.loading-state').should('not.exist')
  cy.get('.chart-container canvas').should('be.visible')
})

// -- Command to check app loading state --
Cypress.Commands.add('checkLoadingState', (isLoading) => {
  if (isLoading) {
    cy.get('.loading-state').should('be.visible')
  } else {
    cy.get('.loading-state').should('not.exist')
  }
})

// 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>>
      selectMultiselectOption(selectId: string, optionText: string): Chainable<void>
      waitForChart(): Chainable<void>
      checkLoadingState(isLoading: boolean): Chainable<void>
    }
  }
}

export {}