import { Component } from '@angular/core';
import { NavController, AlertController, ToastController, LoadingController, PopoverController } from 'ionic-angular';
import { DefaultListable } from '../../defaults/default-listable';
import { INavigable } from '../../interfaces/navigable-interface';
import { Product } from '../../models/product';
import { ProductDetailsPage } from '../product-details/product-details';
import { ProductOptions } from './product-options';
import { DataProvider } from '../../providers/data-provider';

@Component({
    selector: 'page-product-list',
    templateUrl: 'product-list.html'
})
export class ProductListPage extends DefaultListable<Product> implements INavigable {

    popover: any = null;

    constructor(
        public navCtrl: NavController,
        public alertCtrl: AlertController,
        public toastCtrl: ToastController,
        public dataProvider: DataProvider,
        public loadingCtrl: LoadingController,
        public popoverCtrl: PopoverController
    ){
        super(loadingCtrl);
    }
    
    ionViewDidLoad() {
        this.initialize();
    }

    /**
     * Initialize data list
     */
    initialize(): void {
        let loader = this.loadingCtrl.create({
            content: "Cargando productos, espere..."
        });

        loader.present();
        this.dataProvider.getAll(DataProvider.DOCS.PRODUCT_TEMPLATE).then(templates => {
            this.elements = templates.filter(item => {
                return item.doc_state !== "deleted"; 
            });

            loader.dismiss();
        });
    }

    /**
     * Goto page
     */
    goToPage(page: any) {
        this.navCtrl.push(ProductDetailsPage, this);
    }

    /**
     *
     */
    showOptions(e, item) {
        this.popover = this.popoverCtrl.create(ProductOptions);

        this.popover.present({
            ev: e
        });

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

            switch (data.role) {
                case "open":
                    this.openItem(item);
                    break;
                case "delete":
                    this.askIfRemoveItem(item);
                    break;
            
                default:
                    this.openItem(item);
                    break;
            }
            
        });
    }

    /**
     *
     */
    openItem(item: any) {
        this.navCtrl.push(ProductDetailsPage, item, data => {
            console.log(data);
        });
    }    

    /**
     *
     */
    askIfRemoveItem(item): void {
        this.alertCtrl.create({
            title: "Confirmar",
            message: "Desea borrar este producto?",
            buttons: [
                {
                    text: "Cancelar",
                    handler: () => {
                        console.log("Canceled");
                        
                    }
                },
                {
                    text: "Aceptar",
                    handler: () => {
                        this.removeItem(item);
                    }
                }
            ]
        }).present();
    }

    /**
     *
     */
    removeItem(item: any) {
        item.doc_state = "deleted";
        
        this.dataProvider.delete(DataProvider.DOCS.PRODUCT_TEMPLATE, item).then(result => {
            this.remove(item);
        }).catch(e => {
            console.log(e);
            
            this.toastCtrl.create({
                message: "No se pudo eliminar el producto",
                duration: 3000
            }).present();
        });
    }
}
