import { HttpClient } from '@angular/common/http';
import { NgxSpinnerService } from 'ngx-spinner';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { ToastrService } from 'ngx-toastr';
import { DashboardService } from './../../../shared/dashboard.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-model-vehicle-add',
  templateUrl: './model-vehicle-add.component.html',
  styleUrls: ['./model-vehicle-add.component.css']
})
export class ModelVehicleAddComponent implements OnInit {

  constructor(private dashBoardSer: DashboardService,
    private toastr: ToastrService,
    private authSer: AuthServiceService,
    private route: ActivatedRoute,
    private spinner: NgxSpinnerService,
    private location: Location,
    private http: HttpClient
  ) { }

  @ViewChild('f') vehicleForm : NgForm;

  typePage: string = '';
  checkSaveclick:boolean = false;
  vehicleId: number;
  vehicle_types = [];


  formData = {
    name: '',
    status: '',
    vehicle_type_id: ''
  }

  ngOnInit() {

      //init the values of permision boolean
      this.authSer.showAddBtn = false;
      this.authSer.showDeleteBtn = false;
      this.authSer.showEditBtn = false;
      //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.http.get(this.authSer.pathApi + '/get_vehicle_types_list').subscribe(
      (response) => {
        console.log(response);
        this.vehicle_types = response['types'];

      },
      (error) => {
        console.log(error);
      }
     );

     this.route.params.subscribe(
       (params: Params) => {
         this.vehicleId = params['modelVehicleEditId'];
       }
     );

     if(this.vehicleId) {
       this.spinner.show();
       this.dashBoardSer.getItemData(this.vehicleId, 'vehicleModel').subscribe(
         (responce) => {
           console.log(responce);
           this.formData.name = responce['model'].name;
           this.formData.status = responce['model'].status;
           this.formData.vehicle_type_id = responce['model'].vehicle_type_id;
           this.spinner.hide();
         },
         (error) => {
           console.log(error);
         }
       );
     }
  }

  onSubmitted() {

    this.checkSaveclick = true;

    if(this.vehicleId) {

      this.dashBoardSer.editItem(this.vehicleId, this.vehicleForm.value, 'vehicelModel').subscribe(
        (responce) => {
          console.log(responce);
          this.toastr.success('تم التعديل بنجاح ');
          this.location.back();
        },
        (error) => {
          console.log(error);
          this.toastr.error('خطأ في الخادم ، برجاء المحاوله لاحقا');
        }
      );

    } else {

      console.log(this.vehicleForm);

      this.dashBoardSer.addItem(this.vehicleForm.value, 'modelVehicle').subscribe(
        (responce) => {
          this.checkSaveclick = false;
          console.log(responce);
          this.toastr.success('تم الإضافه بنجاح ');
          this.location.back();
        },
        (error) => {
          this.checkSaveclick = false;
          console.log(error);
          this.toastr.error('خطأ في الخادم ، حاول لاحقا !');
        }
      );
    }

  }

}
