import {Component, Input, OnInit} from '@angular/core';
import {PopoverController} from '@ionic/angular';
import {EditorPage} from '../../../pages/editor/editor.page';
import HostRecord from '../../../structures/HostRecord';

@Component({
  selector: 'editor-host-options',
  templateUrl: './host-options.component.html',
  styleUrls: ['./host-options.component.scss'],
})
export class HostOptionsComponent implements OnInit {
  @Input() editor: EditorPage;
  @Input() index: number;
  @Input() event: Event;
  @Input() hostRecord: HostRecord;

  public menuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [];
  protected possibleMenuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [
    {
      name: 'Move Up',
      icons: ['fa-chevron-up'],
      value: 'move_up',
    },
    {
      name: 'Add Node Before',
      icons: ['fa-plus'],
      value: 'add_before',
    },
    {
      name: 'Delete Node',
      icon: 'fa-trash',
      value: 'delete_node',
    },
    {
      name: 'Add Node After',
      icons: ['fa-plus'],
      value: 'add_after',
    },
    {
      name: 'Move Down',
      icons: ['fa-chevron-down'],
      value: 'move_down',
    },
  ];

  constructor(
      protected popover: PopoverController,
  ) { }

  ngOnInit() {
    for ( const item of this.possibleMenuItems ) {
      if ( !item.type ) {
        this.menuItems.push(item);
      } else if ( item.type === this.hostRecord.type ) {
        this.menuItems.push(item);
      }
    }
  }

  async onSelect(event: MouseEvent, value) {
    await this.popover.dismiss({event, value});
  }
}