///
/// Copyright 2015-2026 Micro Focus or one of its affiliates.
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
///      http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

import { ContentChildren, Directive, QueryList } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { BaseResizableTableDirective } from '../resizable-table-base.directive';
import { ResizableTableColumnComponent } from '../resizable-table-column.component';
import { RESIZABLE_TABLE_SERVICE_TOKEN } from '../resizable-table-service.token';
import { ResizableTableService } from './resizable-table.service';

@Directive({
  selector: '[uxResizableTable]',
  exportAs: 'ux-resizable-table',
  providers: [
    {
      provide: RESIZABLE_TABLE_SERVICE_TOKEN,
      useClass: ResizableTableService,
    },
  ],
  host: {
    class: 'ux-resizable-table',
  },
})
export class ResizableTableDirective extends BaseResizableTableDirective {
  /** Get all the column headers */
  @ContentChildren(ResizableTableColumnComponent, { descendants: true })
  columns: QueryList<ResizableTableColumnComponent>;

  constructor() {
    super();
    // we should hide any horizontal overflow when we are resizing
    this._table.isResizing$.pipe(takeUntil(this._onDestroy)).subscribe(this.setOverflow.bind(this));
  }

  /**
   * If this is being used within a modal the table width may initially be zero. This can cause some issues when it does actually appear
   * visibily on screen. We should only setup the table once we actually have a width/
   */
  onTableReady(): void {
    // if we have already initialised or the table width is currently 0 then do nothing
    if (this._initialised || this.getScrollWidth() === 0) {
      return;
    }

    // ensure we initially set the table width
    this._table.tableWidth = this.getScrollWidth();

    // set the columns - prevent expression changed error
    Promise.resolve().then(() => {
      // initially set the columns
      this._table.setColumns(this.columns);

      // force relayout to occur to ensure the UI is consistent with the internal state
      this.updateLayout();
    });

    // watch for any future changes to the columns
    this.columns.changes
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => Promise.resolve().then(() => this._table.setColumns(this.columns)));

    this._initialised = true;
  }

  /** Force the layout to recalculate */
  updateLayout(): void {
    Promise.resolve().then(() =>
      this.columns.forEach((_column, index) => this._table.resizeColumn(index, 0))
    );
  }

  /**
   * We should hide any horizontal overflow whenever we are resizing, this is because when we are dragging a column
   * we must set the column widths in pixel values as percentages cause some jankiness when moving them. However pixel
   * values are less precise and can in some cases cause overflow, so we should hide overflow when we are resizing
   */
  private setOverflow(isResizing: boolean): void {
    Array.from((this._elementRef.nativeElement as HTMLTableElement).tBodies).forEach(tbody =>
      this._renderer.setStyle(tbody, 'overflow-x', isResizing ? 'hidden' : null)
    );
  }
}