/**
 * 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, property } from 'lit/decorators.js';
import { styles } from './nile-list-item.css';
import NileElement from '../internal/nile-element';
import { HasSlotController } from '../internal/slot';

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

  private readonly hasSlotController = new HasSlotController(
    this,
    'preffix',
    'heading',
    'subheading'
  );

  public static get styles(): CSSResultArray {
    return [styles];
  }
  @property({ type: String, attribute: 'icon-name' }) iconName = '';
  @property({ type: Number, attribute: 'icon-size' }) iconSize = 14;

  @property({ type: String, attribute: 'heading' }) heading = '';
  @property({ type: String, attribute: 'sub-heading' }) subHeading = '';
  
  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */
  handleClick(e: any) {
    this.emit('nile-list-item-click', {
      heading: this.heading,
      subheading: this.subHeading,
    });
  }

  public render(): TemplateResult {
    return html`
      ${this.iconName || this.hasSlotController.test('preffix')
        ? html` <slot name="preffix" part="preffix" class="preffix__icon">
            <nile-icon
              name="${this.iconName}"
              size="${this.iconSize}"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
            ></nile-icon>
          </slot>`
        : ``}

      <div class="content__wrapper" part="content__wrapper">
        ${this.heading || this.hasSlotController.test('heading')
          ? html` <slot class="heading" part="heading" name="heading"
              >${this.heading}</slot
            >`
          : ``}
        ${this.subHeading || this.hasSlotController.test('subheading')
          ? html` <slot class="subheading" part="subheading" name="subheading"
              >${this.subHeading}</slot
            >`
          : `
          `}
      </div>

      <slot @click="${this.handleClick}" class="list__item" part="base"> </slot>
      <slot name="suffix" part="suffix" class="list-item__suffix">
      </slot>
    `;
  }

  /* #endregion */
}

export default NileListItem;

declare global {
  interface HTMLElementTagNameMap {
    'nile-list-item': NileListItem;
  }
}