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') as
      | (HTMLElement & { toggle?: (force?: boolean) => void })
      | null;
    if (!sidebar) return;
    if (typeof sidebar.toggle === 'function') {
      sidebar.toggle();
    } else {
      sidebar.toggleAttribute('collapsed', !sidebar.hasAttribute('collapsed'));
    }
    this.collapsed = sidebar.hasAttribute('collapsed');
  }

  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;
  }
}