export class Column {
  constructor(private selector: string, private field: string) {}

  getHeader() {
    return cy.get(`${this.selector} dato-grid-v2 [data-auto-id="${this.field}-column-header"]`);
  }

  getButton(button: 'more-menu' | 'filter' | 'sort') {
    return this.getHeader().find(`[data-auto-id="${this.field}-${button}"]`);
  }

  sort() {
    return this.getHeader().click();
  }

  openMoreMenu() {
    return this.getButton('more-menu').click({ force: true });
  }

  getMoreMenuContainer() {
    return cy.get(`dato-grid-column-header-more-menu div`).first();
  }

  openFilters() {
    this.getHeader().within(() => {
      cy.get('.filter-icon').then(icon => {
        icon.removeClass('opacity-0');
        cy.get('.dato-icon-filter')
          .first()
          .click();
      });
    });
  }

  hide() {
    return this.triggerMoreMenuAction('hide');
  }

  group() {
    return this.triggerMoreMenuAction('group');
  }

  pin() {
    return this.triggerMoreMenuAction('pin');
  }

  autoFit() {
    return this.triggerMoreMenuAction('autofit');
  }

  private triggerMoreMenuAction(action: 'hide' | 'autofit' | 'group' | 'pin') {
    this.openMoreMenu();
    return cy.get(`.dato-grid-more-menu [data-auto-id="column-more-menu-${action}"]`).click({ force: true });
  }
}