import { daAttrSelector, isString } from '../utils';
import Chainable = Cypress.Chainable;

const selectorMap = {
  header: 'dato-dialog-header',
  content: 'dato-dialog-content',
  footer: 'dato-dialog-footer'
};

export class Dialog {
  constructor(private selector: string) {}

  /**
   * Close this dialog
   */
  close(target?: string): Chainable {
    let closeButton = target || '[datoDialogClose]';
    return this.get()
      .find(closeButton)
      .first()
      .click();
  }

  /**
   * Dismiss this dialog
   */
  dismiss(target?: string): Chainable {
    return this.close(target || '[datoDialogDismiss]');
  }

  /**
   * Get the projection element of this dialog
   */
  get(target: 'header' | 'content' | 'footer' | 'dialog' = 'dialog') {
    const projectionElement = cy.get(`${this.selector} .dato-dialog-projection`);
    if (target !== 'dialog') {
      return projectionElement.find(selectorMap[target]);
    }

    return projectionElement;
  }

  /**
   * Get the backdrop element of this dialog
   */
  getBackdrop(): Chainable {
    return cy.get(`${this.selector} .dato-dialog.backdrop`);
  }

  /**
   * Get the X button element of this dialog
   */
  getXButton(): Chainable {
    return this.get().find(daAttrSelector('dialog-header-close'));
  }

  /**
   * Scopes all subsequent cy commands to within the given target
   */
  within(callbackFn: () => any): Chainable;
  within(target: 'header' | 'content' | 'footer' | 'dialog', callbackFn: () => any): Chainable;
  within(
    target: 'header' | 'content' | 'footer' | 'dialog' | (() => any) = 'dialog',
    callbackFn?: () => any
  ): Chainable {
    const selector = isString(target) ? target : 'dialog';
    let chainable = this.get(selector);

    if (!isString(target)) {
      callbackFn = target;
    }

    // @ts-ignore
    return chainable.within(callbackFn);
  }
}