import { html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-side-bar-expand.css';
import NileElement from '../internal/nile-element';

/**
 * Nile side-bar-expand component.
 *
 * @tag nile-side-bar-expand
 *
 */
@customElement('nile-side-bar-expand')
export class NileSideBarExpand extends NileElement {
  @property({ type: Boolean, reflect: true })
  collapsed: boolean = false;
  @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';
  @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';

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

  connectedCallback() {
    super.connectedCallback();
    // Sync with parent sidebar if it exists
    const sidebar = this.closest('nile-side-bar');
    if (sidebar) {
      this.collapsed = sidebar.hasAttribute('collapsed');
    }
  }

  private toggleSidebar() {
    const sidebar = this.closest('nile-side-bar');
    if (!sidebar) return;

    const isCollapsed = sidebar.hasAttribute('collapsed');
    if (isCollapsed) {
      sidebar.removeAttribute('collapsed');
      this.collapsed = false;
    } else {
      sidebar.setAttribute('collapsed', '');
      this.collapsed = true;
    }
  }

  public render(): TemplateResult {
    return html`
      <button class="expand-btn" part="expand-btn" @click=${this.toggleSidebar}>
        ${this.collapsed
          ? html`
              <nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
                <span part="icon"><nile-icon color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="var(--nile-spacing-14px, var(--ng-spacing-2xl))" name="var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))"></nile-icon></span>
              </nile-lite-tooltip>
            `
          : html`
              <nile-lite-tooltip placement="right" hoist content=${this.collapseTooltipText}>
                <span part="icon"><nile-icon color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="var(--nile-spacing-14px, var(--ng-spacing-2xl))" name="var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))"></nile-icon></span>
              </nile-lite-tooltip>
            `}
      </button>
    `;
  }
}

export default NileSideBarExpand;

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