import { html, TemplateResult, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-detail.css';
import NileElement from '../internal/nile-element';
import { watch } from '../internal/watch';
import {
  animateShow,
  animateHide,
  showDetail,
  hideDetail,
  handleSummaryClick,
  handleSummaryKeyDown,
} from './nile-detail.utils';
import type { CSSResultGroup } from 'lit';

@customElement('nile-detail')
export class NileDetail extends NileElement {

  static styles: CSSResultGroup = styles;

  @query('details') detail: HTMLDetailsElement;
  @query('summary') header: HTMLElement;
  @query('.detail__body') body: HTMLElement;

  @property({ attribute: true, type: Boolean, reflect: true }) open = false;

  @property({ attribute: true, type: String, reflect: true }) heading = '';

  @property({ attribute: true, type: String, reflect: true }) description = '';

  @property({ attribute: true, reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';

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

  @state() private _detailOpen = false;

  firstUpdated() {
    this._detailOpen = this.open;
    this.body.hidden = !this.open;
    this.body.style.height = this.open ? 'auto' : '0';
  }

  private _handleSummaryClick(event: Event) {
    event.preventDefault();
    handleSummaryClick(this);
  }

  private _handleSummaryKeyDown(event: KeyboardEvent) {
    handleSummaryKeyDown(event, this);
  }

  @watch('open', { waitUntilFirstUpdate: true })
  async handleOpenChange() {
    if (this.open) {
      this._detailOpen = true;
      await animateShow(this);
    } else {
      await animateHide(this);
      this._detailOpen = false;
    }
  }

  async show() {
    return showDetail(this);
  }

  async hide() {
    return hideDetail(this);
  }

  private get _summaryLabel(): string {
    return [this.heading, this.description].filter(Boolean).join(', ');
  }

  render(): TemplateResult {
    return html`
      <details
        part="base"
        ?open=${this._detailOpen}
        class=${classMap({
          'detail': true,
          'detail--open': this.open,
          'detail--disabled': this.disabled,
        })}
      >
        <summary
          part="header"
          id="header"
          class=${classMap({
            'detail__header': true,
            'detail__header--icon-left': this.expandIconPlacement === 'left',
          })}
          aria-label=${this._summaryLabel || nothing}
          aria-expanded=${this.open ? 'true' : 'false'}
          aria-disabled=${this.disabled ? 'true' : 'false'}
          tabindex=${this.disabled ? '-1' : '0'}
          @click=${this._handleSummaryClick}
          @keydown=${this._handleSummaryKeyDown}
        >
          <slot name="label" part="label" class="detail__label">
            <span part="label-text" class="detail__heading-text">${this.heading}</span>
            ${this.description
              ? html`<span part="description" class="detail__description">${this.description}</span>`
              : ''}
          </slot>

          <slot name="header-actions" part="header-actions" class="detail__header-actions"></slot>

          <slot name="prefix" part="prefix" class="detail__prefix"></slot>

          <span part="summary-icon" class="detail__summary-icon" aria-hidden="true">
            <slot name="expand-icon">
              <nile-icon
                name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                library="system"
              ></nile-icon>
            </slot>
          </span>

          <slot name="suffix" part="suffix" class="detail__suffix"></slot>

        </summary>

        <div part="content" class="detail__body">
          <slot id="content" class="detail__content"></slot>
        </div>
      </details>
    `;
  }
}

export default NileDetail;

declare global {
  interface HTMLElementTagNameMap {
    'nile-detail': NileDetail;
  }
}