export class EzGridCustomHeader {
  init(agParams) {
    var _a;
    this.params = agParams;
    this.element = document.createElement('div');
    this.element.classList.add('ag-cell-label-container');
    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
    this.element.innerHTML = `
          <div id='filter-column-${agParams.column.getColId()}-${agParams.context.dataUnit.dataUnitId}' class='ez-flex ez-flex--justify-between'>
            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
          </div>
          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
            <span class='ag-header-cell-text'>${this.params.displayName}</span>
            <i id='ez-grid-sort-icon-descendente' class='ez-icon-ordem-descendente' style='display: none;font-weight: 100;margin-left: 4px;font-size: var(--text--large, 14px);align-self: center;'></i>
            <i id='ez-grid-sort-icon-ascendente' class='ez-icon-ordem-ascendente' style='display: none;font-weight: 100;margin-left: 4px;font-size: var(--text--large, 14px);align-self: center;'></i>
          </div>
    `;
    this.configMenuClick();
    this.configSortClick();
    this.configSortListener();
    this.configFilterButton();
  }
  refresh(agParams) {
    this.params = agParams;
    this.configFilterButton();
    this.configSortIcon();
  }
  configFilterButton() {
    this.filterButton = this.element.querySelector('#ez-grid-filter-icon');
    this.filterButton.style.display = this.params.hasFilter() ? 'flex' : 'none';
    this.onFilterButtonClickListener = this.onClickFilter.bind(this);
    this.filterButton.addEventListener('click', this.onFilterButtonClickListener);
  }
  onClickFilter() {
    var _a;
    this.params.showColumnFilter((_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
  }
  configSortIcon() {
    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
  }
  configSortListener() {
    if (this.params.enableSorting) {
      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-ascendente');
      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-descendente');
      this.onSortChangedListener = this.configSortIcon.bind(this);
      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
      this.configSortIcon();
    }
  }
  onSortClick(event) {
    this.params.progressSort(event.shiftKey);
  }
  configSortClick() {
    if (this.params.column.getColDef().sortable) {
      this.headerContainer = this.element.querySelector('#ez-header-container');
      this.onSortClickListener = this.onSortClick.bind(this);
      this.headerContainer.addEventListener('click', this.onSortClickListener);
    }
  }
  onMenuClick() {
    this.params.showColumnMenu(this.menuButton);
  }
  configMenuClick() {
    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
    this.onMenuClickListener = this.onMenuClick.bind(this);
    this.menuButton.addEventListener('click', this.onMenuClickListener);
  }
  getGui() {
    return this.element;
  }
  destroy() {
    if (this.onMenuClickListener) {
      this.menuButton.removeEventListener('click', this.onMenuClickListener);
    }
    if (this.onSortClickListener) {
      this.headerContainer.removeEventListener('click', this.onSortClickListener);
    }
    if (this.onFilterButtonClickListener) {
      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
    }
    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
    this.params.column.removeEventListener('applyFilterColumnOptions', this.onFilterAppliedListener);
  }
}
