import { element } from 'protractor';
import { PipeTransform, Pipe, Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import * as _ from 'lodash';
import * as moment from 'moment';
import { MatSnackBar } from '@angular/material';
import { EmployeeService } from '../employee.service';
import { ConfigService } from '../../remuneracion/config/config.service';

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

declare var $ :any;


export interface EmployeeBonos{
  id?: string;
nombre?: string;
valor?: number;
}

export interface EmployeeDetail{
  id ?: any;
  datosPersonales ?: EmployeeDatosPersonales;
}

export interface EmployeeDatosPersonales extends EmployeeDetail{
  nombre ?: string;
}

@Pipe({name: 'keys'})



@Component({
  selector: 'fuse-employee-detail',
  templateUrl: './employee-detail.component.html',
  styleUrls: ['./employee-detail.component.scss']
})



export class EmployeeDetailComponent implements OnInit, OnDestroy, PipeTransform {


  text: string;
  selectBono: any;
  selectNoBono: any;

  private EmployeeDoc: AngularFirestoreDocument<EmployeeDetail>;
  private refDocumentBonosImponibles: AngularFirestoreDocument<EmployeeBonos>;


  private BonosImponiblesCollection: AngularFirestoreCollection<EmployeeBonos>;
  private BonosNoImponiblesCollection: AngularFirestoreCollection<any>;
  private AfpCollection: AngularFirestoreCollection<any>;
  private isapresCollection: AngularFirestoreCollection<any>;


  idEmployee: string;
  employee: any;

  EmployeeBonosImponibles: any;
  EmployeeBonosNoImponibles: any;

  BonosImponibles: any;
  BonosNoImponibles: any;
  AFPList: any;
  isapres: any;

  editorContent: string = 'My Document\'s Title';

  public options: Object = {

    charCounterCount: true,
    toolbarButtons: [
      'print', 'alert','insert'
    ],
    toolbarButtonsXS: ['print', 'alert','insert']
  }

   vm = this;

  constructor(
    private afs: AngularFirestore,
    private route: ActivatedRoute,
    public snackBar: MatSnackBar,
    private employeeService:EmployeeService,
    private configService: ConfigService) {


      this.text = '[My New HTML]';


    // Obtiene parametros de Route
    this.route.params.subscribe(params => {
      this.idEmployee = params['id'];
    });


    // Employee Datos

    this.employeeService.getEmployeeId(this.idEmployee).subscribe(employee => {

      this.employee = employee;
      if (employee.datosLaborales.contratoDocente){

        this.employee.datosLaborales.totalHrs = (this.employee.datosLaborales.base.hrsBase || 0)
                                              + (this.employee.datosLaborales.sueldoGeneral.hrsGeneral || 0)
                                              + (this.employee.datosLaborales.sueldoPIE.hrsPIE || 0)
                                              + (this.employee.datosLaborales.sueldoSEP.hrsSEP || 0);
          employee.datosLaborales.SAEhrs = 6300;
        }

    });



    this.employeeService.getEmployeeBonoimponible().subscribe(bonosImponibles => {
      this.EmployeeBonosImponibles = bonosImponibles;
    });

    this.employeeService.getEmployeeBonoNoimponible().subscribe(bonosNoImponibles => {
      this.EmployeeBonosNoImponibles = bonosNoImponibles;
    });


    // Config Datos

    this.configService.resolve().then(files => {

      this.BonosImponibles = files[0];
      this.BonosNoImponibles = files[1];
      this.isapres = files[3];
      this.AFPList = files[4];

    })

  }



  transform(value, args: string[]): any {
    const keys = [];
    for ( const key of value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }

  updateFechaIngreso($event: Date){
    this.employee.datosLaborales.fechaIngreso = $event;
  }
  saveEmployee(){

    // TODO: mover a servicio

    this.EmployeeDoc.update(this.employee);


    this.EmployeeBonosImponibles.forEach((bono: any, _id: string) => {
      _id = bono.id;
      delete bono.id;
      this.BonosImponiblesCollection.doc(_id).update(bono);
    });

    this.EmployeeBonosNoImponibles.forEach((bono: any, _id: string) => {
      _id = bono.id;
      delete bono.id;
      this.BonosNoImponiblesCollection.doc(_id).update(bono);
    });

    const snackBarRef = this.snackBar.open('Actualizado', 'listo' , {
      duration: 3000
    });

  }

  addBono(bonoSelect: any, typeBono: string){

    const bono = Object.assign({}, bonoSelect);

    bono.idBonoDescuento =  bono.id;
    delete bono.id;

    if (typeBono === 'imponible'){
     this.BonosImponiblesCollection
     .add(bono).then( suss => {
      this.selectBono = {};
     } ).catch(error => {
        console.log('error al ingresar los datos');
      });
    }
    if (typeBono === 'noImponible'){
      this.BonosNoImponiblesCollection
      .add(bono).then(suss => {
        this.selectBono = {};

      }).catch(error => {
         console.log('error al ingresar los datos');
       });
     }

  }

  removeBono(_id: string, typeBono: string){

    if (typeBono === 'imponible') {

      this.BonosImponiblesCollection.doc(_id)
      .delete();
    }

    if (typeBono === 'noImponible') {
     this.BonosNoImponiblesCollection.doc(_id)
    .delete();
    }

  }

  ngOnInit() {




  $.FroalaEditor.DefineIcon('insert', {NAME: 'plus'});
  $.FroalaEditor.RegisterCommand('insert', {
    title: 'Insert HTML',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function (){
      this.html.insert('Hola mundo');
      console.log(this.vm.editorContent)
    }
  });



    $.FroalaEditor.DefineIcon('alert', {NAME: 'info'});
    $.FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      focus: false,
      undo: false,
      refreshAfterCallback: false,

      callback: function() {
        const w = window.open();
        w.document.write($('.report_left_inner').html());
        w.document.body.innerHTML = "<html><head><title></title></head><body>" + this.editorContent + "</body>";
        w.print();
        w.close();


      }
    });



  }


  ngOnDestroy(){
  }


}