import Chainable = Cypress.Chainable;
import { isNumber } from './utils';

export class Tabs {
  constructor(private selector?: string) {}

  /**
   * Set the given tab id or tab index as active
   */
  select(index: number): Chainable;
  select(tabId: string): Chainable;
  select(tabIdOrIndex: string | number): Chainable {
    return this.getTab(tabIdOrIndex).click();
  }

  /**
   * Get the given tab. If no tab is specified the dato-tabset component will return instead.
   */
  get(): Chainable {
    return this.selector ? cy.get(this.selector) : cy.get('dato-tabset').first();
  }

  getTab(index: number): Chainable;
  getTab(tabId: string): Chainable;
  getTab(tabIdOrIndex: string | number): Chainable;
  getTab(tabIdOrIndex: string | number): Chainable {
    return isNumber(tabIdOrIndex)
      ? this.getTabs().eq(tabIdOrIndex as number)
      : this.get().find(`[data-auto-id="${tabIdOrIndex}"]`);
  }

  /**
   * Retrieve the tab headers
   */
  getTabs(): Chainable {
    return this.get().find('li');
  }

  /**
   * Retrieve the active tab element, by the given target.
   */
  getActive(target: 'header' | 'content' = 'header'): Chainable {
    const selector = target === 'header' ? '[data-tab-is-active="true"]' : '[data-auto-id="data-tab-content"]';

    return this.get().find(selector);
  }
}