/**
 * 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 { html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-app-shell-side-nav.css';
import { AppShellController } from '../nile-app-shell/shell-controller';
import NileElement from '../internal/nile-element';

/**
 * @summary The shell's left region — the navigation track; mirrors the shell's rail state so nav content can style against it.
 *
 * @status stable
 * @since 2.0
 *
 * @tag nile-app-shell-side-nav
 *
 * @dependency nile-app-shell
 *
 * @slot - The nav body. Scrolls.
 * @slot header - Pinned above the scroll region — a wordmark or product switcher.
 * @slot footer - Pinned below it — an account row or help link.
 *
 * @csspart header - The pinned header.
 * @csspart body - The scrolling nav body.
 * @csspart footer - The pinned footer.
 *
 * @cssproperty [--nile-app-shell-side-nav-padding=12px] - Body inset.
 * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind the nav; transparent so the nav and page share one.
 */
@customElement('nile-app-shell-side-nav')
export class NileAppShellSideNav extends NileElement {
  public static get styles(): CSSResultArray {
    return [styles];
  }

  private shellLink = new AppShellController(this);

  /** Mirrors the shell's effective rail state. Set by the shell; treat it as read-only and style against it (`nile-app-shell-side-nav[collapsed] .label`). */
  @property({ type: Boolean, reflect: true })
  collapsed: boolean = false;

  /** Id of the shell to follow. Defaults to the nearest ancestor. */
  @property({ type: String })
  shell?: string;

  public connectedCallback(): void {
    super.connectedCallback();
    // Claim the shell's left region unless the author placed it elsewhere.
    if (!this.hasAttribute('slot')) this.setAttribute('slot', 'side-nav');
  }

  protected willUpdate(): void {
    this.shellLink.shellId = this.shell;
    const shell = this.shellLink.shell;
    if (shell) this.collapsed = shell.rail;
  }

  public render(): TemplateResult {
    return html`
      <slot name="header" part="header" class="header"></slot>
      <div class="body" part="body"><slot></slot></div>
      <slot name="footer" part="footer" class="footer"></slot>
    `;
  }
}

export default NileAppShellSideNav;

declare global {
  interface HTMLElementTagNameMap {
    'nile-app-shell-side-nav': NileAppShellSideNav;
  }
}