import {Component, HostListener, Input, OnInit} from '@angular/core';
import HostRecord from '../../structures/HostRecord';
import {ActivatedRoute, Router} from '@angular/router';
import {LoadingController, PopoverController} from '@ionic/angular';
import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component';
import {HostOptionsComponent} from '../../components/editor/host-options/host-options.component';
import {EditorService} from '../../service/editor.service';
import {NodeTypeIcons} from '../../structures/node-types';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.page.html',
  styleUrls: ['./editor.page.scss'],
})
export class EditorPage implements OnInit {
  public typeIcons = NodeTypeIcons;
  @Input() pageId: string;

  constructor(
    protected route: ActivatedRoute,
    protected router: Router,
    protected loader: LoadingController,
    protected popover: PopoverController,
    public readonly editorService: EditorService,
  ) {
    this.route.params.subscribe(params => {
      this.pageId = params.id;
    });
  }

  ngOnInit() {}

  ionViewDidEnter() {
    if ( this.pageId ) {
      this.editorService.startEditing(this.pageId);
    } else {
      this.router.navigate(['/home']);
    }
  }

  @HostListener('document:keydown.control.s', ['$event'])
  onManualSave(event) {
    event.preventDefault();
    this.editorService.save();
  }

  async onOptionsClick(event: MouseEvent, node: HostRecord) {
    if ( !this.editorService.canEdit() ) {
      return;
    }

    const popover = await this.popover.create({
      component: HostOptionsComponent,
      event,
      componentProps: {
        editor: this,
        index: this.editorService.immutableNodes.indexOf(node),
        event,
        hostRecord: node,
      }
    });

    popover.onDidDismiss().then(result => {
      const { event: dismissEvent , value } = result.data;
      if ( value === 'delete_node' ) {
        this.editorService.deleteNode(node.UUID);
      } else if ( value === 'move_up' ) {
        this.editorService.moveNode(node, 'up');
      } else if ( value === 'move_down' ) {
        this.editorService.moveNode(node, 'down');
      } else if ( value === 'add_before' ) {
        this.onAddClick(dismissEvent, 'before', node.UUID);
      } else if ( value === 'add_after' ) {
        this.onAddClick(dismissEvent, 'after', node.UUID);
      }
    });

    await popover.present();
  }

  async onAddClick(event: MouseEvent, position?: 'before' | 'after', positionNodeId?: string) {
    if ( !this.editorService.canEdit() ) {
      return;
    }

    const popover = await this.popover.create({
      component: NodePickerComponent,
      event,
    });

    popover.onDidDismiss().then(result => {
      if ( !result.data ) {
        return;
      }

      this.editorService.addNode(result.data, position, positionNodeId);
    });

    await popover.present();
  }
}