import { MainMenuService } from './../../../shared/main-menu.service';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-menu',
  templateUrl: './add-menu.component.html',
  styleUrls: ['./add-menu.component.css']
})
export class AddMenuComponent implements OnInit {

  @ViewChild('f') externalFormData: NgForm;

  urlImg: string =  '../../assets/image/avatar.png';
  imageBase64: string = '';
  photoType: string = '';
  checkChangeImage: boolean = false;
  checkValidImg: boolean = true;
  typeMode: boolean = false;
  photoEdit: boolean = true;
  checkSaveClick:boolean = false;
  typeLink: string = '';
  menuId: number;
  parentList = [];

  menu = {
    name: '',
    name_en: '',
    parent_id: '',
    link: '',
    status: '',
    ranking: '',
  };



  constructor(private toastr: ToastrService, 
    private spinner: NgxSpinnerService,
    private location: Location,
    private route: ActivatedRoute,
    private authSer: AuthServiceService,
    private authService: AuthServiceService,
    private menuService: MainMenuService, ) { 
      this.spinner.show();
    }

  ngOnInit() {
    
    //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;
    this.menu.status = '1';
    this.route.params.subscribe(
      (params: Params) => {
        if(params['typeMenuMode'] == 'edit') {
          this.typeMode = true;
          this.typeLink = 'تعديل';
          this.menuId = params['editMenuId'];
          this.menuService.getMenuData(this.menuId).subscribe(
            (responce) => {
              console.log(responce);
              console.log(responce['menu']);
              this.menu.name = responce['menu'].name;
              this.menu.name_en = responce['menu'].name_en;
              this.menu.link = responce['menu'].link;
              this.menu.status = responce['menu'].status;
              this.menu.ranking = responce['menu'].ranking;
              this.menu.parent_id = responce['menu'].parent_id ? responce['menu'].parent_id : '';
              if(responce['menu'].photo) {
                this.checkValidImg = false;
                this.urlImg = this.authService.pathImg + responce['menu'].photo;
              }
              this.spinner.hide();
            },
            (error) => {
              console.log(error);
            }
          )
        } else {
          this.typeLink = 'أنشاء جديد';
          this.spinner.hide();
        }
      }
    );

    this.menuService.getParentList().subscribe(
      (responce) => {
        console.log('parents' , responce);
        this.parentList = responce['menus'];
      }, 
      (error) => {
        console.log(error);
      }
    )
  };



  onFileChanges(event) {
    console.log(event);
    this.imageBase64 = event[0].base64;
    this.photoType = event[0].type.split('/');
    console.log(this.photoType[1]);
    this.checkChangeImage = true;
    this.checkValidImg = false;
  }

  getUrl(event) {   
    if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]); // read file as data url
    reader.onload = (event) => { // called once readAsDataURL is completed
      this.urlImg = event.target['result'];
    }
  }
 }

 //on submitted
 onSubmitted() {
   this.checkSaveClick = true;//to make save disabled after one click
  const formData = this.externalFormData.value;
  if(this.checkChangeImage){
    formData['photo'] = this.imageBase64;
    formData['photo_type'] = this.photoType[1];
  } else {
    delete formData.photo;
    delete formData.photo_type; 
    this.photoEdit = false;
    console.log(formData);
  }
  if(this.typeMode){
    if(this.imageBase64 == '' && this.photoEdit == true){
      this.toastr.warning('قم باختيار صوره !');
      this.checkSaveClick = false;
    } else {
      this.menuService.editMenu(formData, this.menuId).subscribe(
        (responce) => {
          console.log(responce);
          this.toastr.success('تمت التعديل بنجاح');
          this.location.back();
          this.checkSaveClick = false;
        },
        (error) => {
          this.checkSaveClick = false;
          console.log(error);
          this.toastr.error('خطأ في التعديل !');
        }
      );
    }
  } else {
    if(this.imageBase64 == ''){
      this.toastr.warning('قم باختيار صوره !');
      this.checkSaveClick = false;
    } else {
      this.menuService.addMain(formData).subscribe(
        (responce) => {
          console.log(responce);
          this.toastr.success('تمت الاضافه بنجاح');
          this.location.back();
          this.checkSaveClick = false;
        },
        (error) => {
          console.log(error);
          this.checkSaveClick = false;
          this.toastr.error('خطأ في الحفظ !');
        }
      );
    }
  }
 }

}
