/**
 * 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-side-bar.css';
import NileElement from '../internal/nile-element';

/**
 * Nile side-bar component.
 *
 * @tag nile-side-bar
 *
 * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
 * @attr width - Expanded width of the sidebar (px).
 * @attr collapsed-width - Collapsed width of the sidebar (px).
 * @attr overlay - When set, the sidebar is taken out of normal flow and floats
 *   on top of adjacent content, so expanding it overlays the page instead of
 *   pushing siblings sideways.
 *
 * @event nile-toggle - Fired after the collapsed state changes (via the built-in
 *   expand button or the public expand()/collapse()/toggle() methods).
 *   `event.detail.collapsed` is the new state.
 *
 * @method expand() - Expand the sidebar.
 * @method collapse() - Collapse the sidebar.
 * @method toggle(force?) - Toggle, or force a specific collapsed state.
 */
@customElement('nile-side-bar')
export class NileSideBar extends NileElement {
  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';

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

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

  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;
   
  @property({ type: Number, attribute: true })width: number | null = null;

 
  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;

  public static get styles(): CSSResultArray {
    return [styles];
  }

  protected updated(changedProps: Map<string, unknown>) {
    super.updated(changedProps);

    if (changedProps.has('collapsed')) {
      this.querySelectorAll<NileElement>(
        `
          nile-side-bar-logo,
          nile-side-bar-footer-item,
          nile-side-bar-group-item,
          nile-side-bar-group,
          nile-side-bar-header,
          nile-side-bar-group-item-text,
          nile-side-bar-group-item-icon,
          nile-side-bar-expand
        `
      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));
    }
    

    if (changedProps.has('width') && this.width !== null) {
      this.style.setProperty('--sidebar-width', `${this.width}px`);
    }
    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {
      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
    }
  }
  public expand(): void {
    this.setCollapsed(false);
  }
  public collapse(): void {
    this.setCollapsed(true);
  }

  public toggle(force?: boolean): void {
    this.setCollapsed(force ?? !this.collapsed);
  }

  private setCollapsed(value: boolean): void {
    if (this.collapsed === value) return;
    this.collapsed = value;
    this.emit('nile-toggle', { collapsed: value });
  }

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

export default NileSideBar;

declare global {
  interface HTMLElementTagNameMap {
    'nile-side-bar': NileSideBar;
  }
}