import { LitElement, type TemplateResult, html } from 'lit'
import { property } from 'lit/decorators.js'
import type { NavigationItemElement } from '../../elements/navigation/ui-navigation-item.js'

export type NavigationPage = 'data-domain' | 'description' | 'api-access' | 'session' | 'actions' | 'publish'

export function isNavigationPage(value = ''): value is NavigationPage {
  return ['data-domain', 'description', 'api-access', 'session', 'actions', 'publish'].includes(value)
}

/**
 * The navigation component for API modeling screens.
 *
 * @fires pagechange - Fired when the navigation page changes. The detail object has
 *                     the `page` property with the new page.
 */
export default class ApiModelingNavigation extends LitElement {
  /**
   * The current navigation page.
   * @attribute
   */
  @property({ type: String }) accessor page: NavigationPage = 'data-domain'
  /**
   * Whether the navigation is collapsed (drawer closed).
   * @attribute
   */
  @property({ type: Boolean, reflect: true }) accessor collapsed = false

  /**
   * Sets the current navigation page and fires the `pagechange` event.
   * @param page The page to set
   */
  selectPage(page: NavigationPage): void {
    this.page = page
    this.dispatchEvent(
      new CustomEvent('pagechange', {
        detail: { page },
        bubbles: true,
        composed: true,
      })
    )
  }

  /**
   * A handler for the navigation select event.
   * @param event The select event
   */
  protected handleSelect(event: CustomEvent<{ item: NavigationItemElement }>): void {
    const selectedPage = event.detail.item.dataset.page
    const page = selectedPage?.substring(1) // Remove leading slash
    if (isNavigationPage(page)) {
      this.selectPage(page)
    }
  }

  override render(): TemplateResult {
    const { collapsed, page = 'data-domain' } = this
    return html`
      <ui-navigation aria-label="Main navigation" current="step" class="drawer" @select="${this.handleSelect}">
        <ui-navigation-item data-page="/data-domain" .iconOnly=${collapsed} .selected=${page === 'data-domain'}>
          <ui-icon slot="icon" icon="schemaNamespace"></ui-icon>
          Data Domain
        </ui-navigation-item>
        <ui-navigation-item data-page="/description" .iconOnly=${collapsed} .selected=${page === 'description'}>
          <ui-icon slot="icon">description</ui-icon>
          Description
        </ui-navigation-item>
        <ui-navigation-item data-page="/api-access" .iconOnly=${collapsed} .selected=${page === 'api-access'}>
          <ui-icon slot="icon">lock</ui-icon>
          Api Access
        </ui-navigation-item>
        <ui-navigation-item data-page="/session" .iconOnly=${collapsed} .selected=${page === 'session'}>
          <ui-icon slot="icon">person</ui-icon>
          Session
        </ui-navigation-item>
        <ui-navigation-item data-page="/actions" .iconOnly=${collapsed} .selected=${page === 'actions'}>
          <ui-icon slot="icon">integration_instructions</ui-icon>
          Actions
        </ui-navigation-item>
        <ui-navigation-item data-page="/publish" .iconOnly=${collapsed} .selected=${page === 'publish'}>
          <ui-icon slot="icon">publish</ui-icon>
          Publish
        </ui-navigation-item>
      </ui-navigation>
    `
  }
}
