import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnInit,
  Output,
  ViewChild,
} from '@angular/core';

/**
 * Asset interface to follow
 */
export interface App {
  /**
   * Identificator of the app
   */
  id: number;
  /**
   * If the app is currently in use
   */
  active: boolean;

  /**
   * icon name defined by [NexOpt CDN]{@link https://cdn.nexopt.com/icons}
   */
  icon: string;
  /**
   * Name of the app
   */
  text: string;
}

/**
 * Apps Menu component
 *
 * Visualizes our applications in menu like component
 *
 * tag: no-apps-menu
 */
@Component({
  selector: 'no-apps-menu',
  templateUrl: './apps-menu.component.html',
  styleUrls: ['./apps-menu.component.scss'],
})
export class AppsMenuComponent implements OnInit {
  /**
   * @ignore
   */
  @ViewChild('tabOverlay') tabOverlay!: ElementRef;

  /**
   * Direction of the component
   *
   * @param {string} dir
   */
  @Input('dir') dir!: string;

  /**
   * Data to present in apps menu
   *
   * @example
   * Simply pass in array of objects
   * ```
   * apps = [
   * {
   *   id: 1,
   *   active: false,
   *   text: 'Discuss',
   *   icon: 'mdi mdi-message-reply-text',
   * },
   * {
   *   id: 2,
   *   active: false,
   *   text: 'Contacts',
   *   icon: 'mdi mdi-folder-account-outline',
   * }]
   * ```
   *
   * if you have array you can create appsmenu in js
   * ```
   * const appsMenu = document.querySelector('no-apps-menu');
   * appsMenu.apps = [items]
   * ```
   * @param {App[]} apps
   */
  @Input('apps') apps: App[] = [];

  /**
   * Listener for selected app
   *
   * @example
   * in js
   * ```
   * const appsMenu = document.querySelector('no-apps-menu');
   * appsMenu.addEventListener('onAppClick', (app) => {
      //could be app.detail, since its event
   *   console.log(app);
   * })
   * ```
   *
   * @return {App} app
   */
  @Output() onAppClick: EventEmitter<App> = new EventEmitter<App>();

  /**
   * Current active application
   */
  activeApp = null;

  /**
   * @ignore
   */
  constructor() {}

  /**
   * Always upon init sets active app as first
   */
  ngOnInit(): void {
    if (!this.activeApp) {
      this.apps[0].active = true;
    }
  }

  /**
   * Handling background UX to visualize active app + selecting active app
   * @param id Selected app identificator
   * @param index Index to know where position background UX
   */
  setActiveApp(id: number, index: number) {
    this.apps.forEach((a: App) => {
      a.active = false;
    });
    const app = this.apps.find((x: App) => x.id == id);
    if (app) {
      app.active = true;
      if (this.dir == 'vertical') {
        this.tabOverlay.nativeElement.style.top = index * 44 + 44 / 10 + 'px';
      } else {
        this.tabOverlay.nativeElement.style.left = index * 36 + 'px';
      }

      this.onAppClick.emit(app);
    }
  }
}