import { Component, OnInit } from '@angular/core';

import {AlertController, Platform} from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { ApiService } from './service/api.service';
import { Router } from '@angular/router';
import { TREE_ACTIONS } from 'angular-tree-component';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  public addChildTarget: any = false;
  public deleteTarget: any = false;
  public lastClickEvent: Array<any> = [];

  public nodes = [];
  public options = {
    actionMapping: {
      mouse: {
        dblClick: (tree, node, $event) => {
          console.log({ tree, node, $event });
          const id = node.data.id;
          this.router.navigate(['/editor', { id }]);
        },
        click: (tree, node, $event) => {
          console.log('click', { tree, node, $event });
          TREE_ACTIONS.FOCUS(tree, node, $event);
          this.addChildTarget = node;
          this.deleteTarget = node;
          this.lastClickEvent = [tree, node, $event];
        }
      }
    }
  };

  public darkMode = false;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private api: ApiService,
    protected router: Router,
    protected alerts: AlertController,
  ) {
    this.initializeApp();
  }

  ngOnInit() {
    this.reloadMenuItems().subscribe();
  }

  async onTopLevelCreate() {
    const alert = await this.alerts.create({
      header: 'Create Page',
      message: 'Please enter a new name for the page:',
      cssClass: 'page-prompt',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: 'My Awesome Page',
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
        },
        {
          text: 'Create',
          handler: async (args) => {
            this.api.post('/page/create', args).subscribe((res) => {
              this.router.navigate(['/editor', {id: res.data.UUID}]);
              this.reloadMenuItems().subscribe();
            });
          },
        }
      ],
    });

    await alert.present();
  }

  async onChildCreate() {
    const alert = await this.alerts.create({
      header: 'Create Sub-Page',
      message: 'Please enter a new name for the page:',
      cssClass: 'page-prompt',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: 'My Awesome Page',
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
        },
        {
          text: 'Create',
          handler: async (args) => {
            args = {
              name: args.name,
              parentId: this.addChildTarget.data.id
            };
            this.api.post('/page/create-child', args).subscribe((res) => {
              this.reloadMenuItems().subscribe(() => {
                TREE_ACTIONS.EXPAND(this.lastClickEvent[0], this.lastClickEvent[1], this.lastClickEvent[2]);
                this.router.navigate(['/editor', {id: res.data.UUID}]);
              });
            });
          },
        }
      ],
    });

    await alert.present();
  }

  async onDeleteClick() {
    const alert = await this.alerts.create({
      header: 'Delete page?',
      message: 'Deleting this page will make its contents and  all of its children inaccessible. Are you sure you want to continue?',
      buttons: [
        {
          text: 'Keep It',
          role: 'cancel',
        },
        {
          text: 'Delete It',
          handler: async () => {
            this.api.post(`/page/delete/${this.deleteTarget.data.id}`).subscribe(res => {
              this.reloadMenuItems().subscribe();
              this.deleteTarget = false;
              this.addChildTarget = false;
            });
          },
        },
      ],
    });

    await alert.present();
  }

  reloadMenuItems() {
    return new Observable(sub => {
      this.api.get('/menu/items').subscribe(result => {
        this.nodes = result.data;
        sub.next();
        sub.complete();
      });
    });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  toggleDark() {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    this.darkMode = !this.darkMode;
    document.body.classList.toggle('dark', this.darkMode);
  }
}