import { LitElement, TemplateResult, html, nothing } from 'lit'
import { property } from 'lit/decorators.js'
import '@material/web/iconbutton/icon-button.js'
import '../../../md/icons/ui-icon.js'

export default class AppBar extends LitElement {
  /**
   * Deep navigation bar renders the back button and the title only.
   */
  @property({ type: Boolean }) accessor deep = false

  constructor() {
    super()
    this.role = 'header'
  }

  protected override render(): TemplateResult {
    return html`
      <div class="app-bar">
        <div class="drawer-sizer">
          ${this.renderBackButton()} ${this.renderMenuTriggerButton()} ${this.renderTitle()}
        </div>
        <div class="bar-content">${this.renderSearchSlot()} ${this.renderAppActions()} ${this.renderUserAvatar()}</div>
      </div>
    `
  }

  protected renderBackButton(): TemplateResult | typeof nothing {
    const { deep } = this
    if (!deep) {
      return nothing
    }
    return html`
      <md-icon-button class="back-button">
        <ui-icon icon="arrowBack"></ui-icon>
      </md-icon-button>
    `
  }

  protected renderMenuTriggerButton(): TemplateResult | typeof nothing {
    const { deep } = this
    if (deep) {
      return nothing
    }
    return html`
      <md-icon-button class="menu-button">
        <ui-icon icon="menu"></ui-icon>
      </md-icon-button>
    `
  }

  protected renderTitle(): TemplateResult {
    return html`<div class="title"><slot name="title"></slot></div>`
  }

  protected renderAppActions(): TemplateResult {
    return html`<div class="actions"><slot name="action"></slot></div>`
  }

  protected renderSearchSlot(): TemplateResult {
    return html`<div class="search"><slot name="search"></slot></div>`
  }

  protected renderUserAvatar(): TemplateResult {
    return html`<div class="avatar"><slot name="avatar"></slot></div>`
  }
}
