import { Component, OnInit, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ApiService } from 'app/api.service';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-catalog-products-add',
  templateUrl: './catalog-products-add.component.html',
  styleUrls: ['./catalog-products-add.component.scss']
})
export class CatalogProductsAddComponent implements OnInit {

  public types: any = [];
  public statuses: any = [];
  public categories: any = [];
  public action: string = '';

  constructor(private title: Title, public apiService: ApiService, public dialogRef: MatDialogRef<CatalogProductsAddComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
    this.types.push({name: 'PRODUCTO'});
    this.types.push({name: 'FLOR'});
    this.statuses.push({id: '1', name: 'Publicar disponible'});
    this.statuses.push({id: '0', name: 'Publicar no disponible'});
    this.statuses.push({id: '-1', name: 'No publicar'});
    this.data.price = parseInt(this.data.price);

    if (this.data.type == 'add') {
      this.action = 'Agregar';
    }
    else if (this.data.type == 'edit') {
      this.action = 'Editar';
    }
    this.apiService.getCategories().subscribe((data:any) => {
      this.categories = data.data;
    });
    /*this.apiService.getStates().subscribe((data:any) => {
      this.states = data.data;
      this.loadCities();
    });  */
  }

  ngOnInit() {

  }
  getChecked(catId:string) {
    for (let x = 0; x < this.data.categories.length; x++) {
      if (this.data.categories[x].id == catId && this.data.categories[x].enabled == '1') {
        return true;
      }
    }
    return false;
  }
  clickChecked(catId:string, evt:any) {
   let found = -1; 
   for (let x = 0; x < this.data.categories.length; x++) {
    if (this.data.categories[x].id == catId) {
      found = x;
    }
  }
  if (found > -1) {
    if (this.data.categories[found].enabled == '1') {
      this.data.categories[found].enabled = '0';
    } else {
      this.data.categories[found].enabled = '1';
    }
  }
  else {
    this.data.categories.push({
      id: catId,
      enabled: '0'
    });
  }
  }


  changeImage(event:any) {
    event.preventDefault();
    let element : HTMLElement = document.getElementById('changeImage') as HTMLElement;
    element.click();
  }
  changeImagePlay(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        this.apiService.loader.emit(true);
        this.apiService.uploadImage(file).subscribe((data:any) => {
          this.apiService.loader.emit(false);
          if (data.res == "OK") {
            this.data.image = data.url;
          } else {
            console.log('TODO Error upload');
          }
        });
    }
  }
  save() {
    this.apiService.saveProduct(this.data).subscribe((data:any) => {
      if (data.res == "OK") {
        this.apiService.showOk("Perfecto","Operación realizada con éxito");
        this.dialogRef.close();
      } else {
        this.apiService.showError("Error",data.msg);
      }
    });
  }
  dismiss() {
    this.dialogRef.close();
  }

}
