/**
 * Copyright Aquera Inc 2025
 *
 * 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 { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-grid-row.css';
import NileElement from '../../internal/nile-element';

/**
 * Nile grid-row component.
 *
 * @tag nile-grid-row
 *
 */
@customElement('nile-grid-row')
export class NileGridRow extends NileElement {
  /**
   * The styles for nile-grid-row
   * @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];
  }

  @property({ type: Boolean, reflect: true, attribute: true }) disabled: boolean = false;
  @property({ type: Boolean, reflect: true, attribute: true }) hover: boolean = false;
  @property({ type: Boolean, reflect: true, attribute: true }) selected: boolean = false;

  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'row');
  }

  protected render() {
    return html`
      <div part="grid-row-base" class="row-base">
        <div part="row-slot" class="row-slot">
          <slot></slot>
        </div>
        <div part="row-bg" class="row-bg"></div>
      </div>
    `;
  }

  /* #endregion */
}

export default NileGridRow;

declare global {
  interface HTMLElementTagNameMap {
    'nile-grid-row': NileGridRow;
  }
}