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

import { 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';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  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);
        }
      }
    }
  };
  public darkMode = false;

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

  ngOnInit() {
    this.api.get('/menu/items').subscribe(result => {
      this.nodes = result.data;
    });
  }

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

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

    if (this.darkMode) {
      console.log('Dark Mode On');
    } else {
      console.log('Dark Mode Off');
    }
  }
}