/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {
  LitElement,
  html,
  CSSResultArray,
  TemplateResult,
} from 'lit';
import { customElement, query, property } from 'lit/decorators.js';
import { styles } from './nile-table-row.css';
import NileElement from '../internal/nile-element';

/**
 *nile-table-row component.
 *
 * @tag nile-table-row
 *
 */
@customElement('nile-table-row')
export class NileTableRow extends NileElement {
  /**
   * The styles for TableRow
   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
   */

  public static get styles(): CSSResultArray {
    return [styles];
  }

  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */

  private handleSortingAlter(event: CustomEvent) {
    const header_items: any = [
      ...this.querySelectorAll('nile-table-header-item'),
    ];
    for (let i = 0; i < header_items.length; i++) {
      const header = header_items[i];
      const haveIcon = header.textContent == event.detail.value.curr_sort_string;
      if (!haveIcon) {
        header.sorting_ct = 0;
      }
    }
  }

  public render(): TemplateResult {
    return html`
      <slot
        part="nile-row"
        @nile-click-sort="${this.handleSortingAlter}"
      ></slot>
    `;
  }

  /* #endregion */
}

export default NileTableRow;

declare global {
  interface HTMLElementTagNameMap {
    'nile-table-row': NileTableRow;
  }
}