import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, Loading, LoadingController, AlertController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { LoginPage } from "../pages/login/login";
import { HomePage } from "../pages/home/home";
import { CustomersPage } from "../pages/customers/customers";
import { ProductsPage } from "../pages/products/products";
import { VariantsPage } from "../pages/variants/variants";
import { OrdersPage } from "../pages/orders/orders";
import { LeadsPage } from "../pages/leads/leads"; 
import { PhonecallsPage } from "../pages/phonecalls/phonecalls";
import { ToolsPage } from "../pages/tools/tools";
import { AboutPage } from "../pages/about/about";

import { EventsManager } from "../base/events/event-manager";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild(Nav) nav: Nav;

    rootPage: any = LoginPage;
    homePage: any = HomePage;
    entries: Array<{ visible: boolean, title: string, pages: Array<{ visible: boolean, title: string, icon: string, component: any, params?: any }> }>;
    loader: Loading;

    constructor(
        public platform: Platform,
        public loadingCtrl: LoadingController,
        public alertCtrl: AlertController
    ) {
        this.initializeApp();

        this.entries = [
            {
                visible: true,
                title: "Ventas",
                pages: [
                    {
                        visible: true,
                        title: "Clientes",
                        icon: "people",
                        component: CustomersPage
                    },
                    {
                        visible: true,
                        title: "Presupuestos",
                        icon: "basket",
                        component: OrdersPage,
                        params: {
                            kind: "budget",
                            filters: [["state", "=", "draft"]]
                        }
                    },
                    {
                        visible: true,
                        title: "Ventas",
                        icon: "cart",
                        component: OrdersPage,
                        params: {
                            kind: "sale",
                            filters: [["state", "!=", "draft"]]
                        }
                    },
                    {
                        visible: true,
                        title: 'Productos',
                        icon: "cube",
                        component: ProductsPage
                    },
                    {
                        visible: true,
                        title: 'Variantes',
                        icon: "list-box",
                        component: VariantsPage
                    },
                ]
            },
            {
                visible: true,
                title: "CRM",
                pages: [
                    {
                        visible: true,
                        title: 'Iniciativas',
                        icon: "flag",
                        component: LeadsPage,
                        params: {
                            kind: "lead",
                            filters: [["type", "=", "lead"]]
                        }
                    },
                    {
                        visible: true,
                        title: "Oportunidades",
                        icon: "bonfire",
                        component: LeadsPage,
                        params: {
                            kind: "opportunity",
                            filters: [["type", "=", "opportunity"]]
                        }
                    },
                    {
                        visible: true,
                        title: "Llamadas",
                        icon: "call",
                        component: PhonecallsPage
                    }
                ]
            },
            {
                visible: true,
                title: "Herramientas",
                pages: [
                    {
                        visible: true,
                        title: 'Herramientas',
                        icon: "build",
                        component: ToolsPage
                    },
                    {
                        visible: true,
                        title: "Acerca",
                        icon: "information-circle",
                        component: AboutPage
                    }
                ]
            }
        ];
    }

    /**
     *
     */
    initializeApp() {
        this.platform.ready().then(() => {
            StatusBar.styleDefault();
            Splashscreen.hide();

            EventsManager.subscribe("app:loading", data => { 
                if (data) {
                    this.loader = this.loadingCtrl.create({
                        content: "Cargando, espere..."
                    });
                    
                    this.loader.present();
                } else {
                    this.loader.dismiss();
                }
            });

            EventsManager.subscribe("app:error", data => {
                this.alertCtrl.create({
                    title: "Error",
                    message: "Ha ocurrido un error",
                    buttons: [
                        {
                            text: "Ver detalles",
                            handler: () => {
                                this.alertCtrl.create({
                                    title: "Detalles del error",
                                    message: data,
                                    buttons: [{ text: "Cerrar" }]
                                }).present();
                            }
                        },
                        {
                            text: "Cerrar"
                        }
                    ]
                }).present();
            });
        });
    }

    /**
     *
     */
    openPage(page) {
        this.nav.setRoot(page.component, page);
    }
}