import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { CustomersRegistrationService } from '../customers-registration.service';
import { SharedService } from '../../../shared/shared.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'ngx-customers-add-edit',
  templateUrl: './customers-add-edit.component.html',
  styleUrls: ['./customers-add-edit.component.scss']
})
export class CustomersAddEditComponent implements OnInit {

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private register: CustomersRegistrationService,
    private auth: SharedService,
    private http: HttpClient
    ) { }

    themes = [];
    fonts = [];
    languages = [];
    imageBase64: string = '';
    photoType: string = '';
    urlImg: string =   '../../../assets/images/kate.png';
    checkChangeImage: boolean = false;
    formData = {
      name:'',
      access_of_multiple_sites : '',
      phone : '',
      commercial_number : '',
      industrial : '',
      website_address :'',
      address : '',
      total_users_request : '',
      http_host_demo : '',
      version_number : '',
      theme_id : '',
      font_id : '',
      register_date : '',
      expire_date : '',
      logo_photo : '',
      logo_photo_type : '',
      back_ground_photo : '',
      back_ground_photo_type : '',
      languages_ids : [],
 
    }
    company_general_info = this.register.company_registrtion;
  ngOnInit() {
    this.http.get(this.auth.pathApi + '/themes_list')
          .subscribe(
            res => {
              console.log(res);
              this.themes = res[('themes')];
            },
            err => {
              console.log(err);
              
            }
          );
    this.http.get(this.auth.pathApi + '/fonts_list')
              .subscribe(
                res =>{
                  console.log(res);
                 this.fonts = res[('fonts')]; 
                },
                err =>{
                  console.log(err);
                  
                }
              );
    this.http.get(this.auth.pathApi + '/languages_list')
    .subscribe(
      res =>{
        console.log(res);
        this.languages = res[('languages')]; 
      },
      err =>{
        console.log(err);
        
      }
    );
  }
  
  setThemsId(event){
    this.formData.theme_id = event.target.value;
  }
  setFontId(event){
    this.formData.font_id = event.target.value;
  }
  setLangId(event){
    this.formData.languages_ids.push(event.target.value);
  }
  onFileChanges(event) {
    console.log(event);
    this.imageBase64 = event[0].base64;
    this.photoType = event[0].type.split('/');
    console.log(this.photoType[1]);
    console.log(this.imageBase64);
    this.formData.logo_photo = this.imageBase64;
    this.formData.logo_photo_type = this.photoType;
    this.checkChangeImage = true;
  }
  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'];
    }
  }
 }

  next(){
    console.log(this.formData);
    this.company_general_info.company_name = this.formData.name;
    this.company_general_info.address = this.formData.address;
    this.company_general_info.website_address = this.formData.website_address;
    this.company_general_info.phone = this.formData.phone;
    this.company_general_info.commercial_number = this.formData.commercial_number;
    this.company_general_info.industrial = this.formData.industrial;
    this.company_general_info.register_date = this.formData.register_date;
    this.company_general_info.expire_date = this.formData.expire_date;
    // this.router.navigate(['../registerTwo'], {relativeTo: this.route});
    console.log(this.formData);
    
  }
}