import { isString } from './utils';

const container = `.dato-select__dropdown-container`;

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

  /**
   * Select one or multiple items
   */
  select(id: number | string, close: boolean = true) {
    this._toggle();
    const subject = this.getOptions();

    if (isString(id)) subject.contains(id).click();
    else subject.eq(id).click();
    close && this.close();
  }

  /**
   * Toggle multiple options
   * By default it'll close the select. To prevent it pass { close: false }
   */
  toggleMulti(ids: (number | string)[] = [], { close = true }: { close?: boolean } = {}) {
    this._toggle();
    this.getOptions().as('selectOptions');
    ids.forEach(id => {
      if (isString(id)) {
        cy.get('@selectOptions')
          .contains(id)
          .click();
      } else {
        cy.get('@selectOptions')
          .eq(id)
          .click();
      }
    });
    close && this.close();
  }

  /**
   * Clear the selected options
   */
  clearMulti() {
    this._toggle();
    cy.get(container)
      .find(`.select-option-active`)
      .click({ multiple: true });
    this.close();
  }

  /**
   * Select or Unselect All
   */
  selectAll({ close = true }: { close?: boolean } = {}) {
    this._toggle();
    cy.get(`.dato-select__header`).click();
    close && this.close();
  }

  /**
   * Search in combo select
   */
  search(term: string) {
    this._toggle();
    cy.get(this.selector)
      .find(`input[type=search]`)
      .type(term);
  }

  /**
   * Assert whether an option is disabled
   */
  shouldBeDisabled(id: number | string) {
    this._toggle();
    let subject;
    if (isString(id)) subject = this.getOptions().contains('.dato-select__option', id);
    else subject = this.getOptions().eq(id);
    subject.should('have.class', `dato-select__option--disabled`);
    this.close();
  }

  /**
   * Get the options elements
   *
   */
  getOptions() {
    return cy
      .get(container)
      .find(`.dato-select__option`)
      .not('.force-hide');
  }

  /**
   * Close the select by clicking outside
   */
  close() {
    cy.get('body').click('topRight');
  }

  /**
   * Scroll the container to bottom
   * Useful for infinite scroll tests
   */
  scrollToBottom() {
    this._toggle();
    return cy
      .get(container)
      .find(`.dato-select__dropdown`)
      .scrollTo('bottom');
  }

  /**
   * Toggle the select visibility
   */
  _toggle() {
    cy.get(this.selector)
      .find(`.dato-select__trigger`)
      .click('bottomRight');
  }
}