import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormArray} from '@angular/forms';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { Pump } from 'src/app/models/pump';
import { PumpModel } from 'src/app/models/pumpModel';
import { Wharf } from 'src/app/models/Wharf';
import { WerfFormTwoService } from './werf-form-two.service';
import { ActivatedRoute } from '@angular/router';
import { Sensor } from 'src/app/models/sensor';

@Component({
  selector: 'app-werf-form-two',
  templateUrl: './werf-form-two.component.html',
  styleUrls: ['./werf-form-two.component.css']
})
export class WerfFormTwoComponent implements OnInit {
  // de aan te maken werf
  wharf: Wharf = {
    id: 0,
    nameCode: '',
    cityID: 1,
    streetName: '',
    streetNumber: 0,
    startDate: '',
    endDate: '',
    wharfDepth: 0,
  };

  // pomp
  @Input() pump: Pump = {
    id: 0,
    gridPos: '',
    description: '',
    pumpModelID: 31,
    wharfID: 0
  };

  // pumpmodel
  @Input() pumpModel: PumpModel = {
    id: 0,
    model: '',
    onlyBinary: false
  };

  // sensor
  @Input() sensor: Sensor = {
    id: 0,
    gridPos: '',
    description: '',
    batteryPercentage: 0,
    wharfID: 0
  }

  wharfId: number = 0;
  wharf$: Observable<Wharf> = new Observable<Wharf>();
  pumps$: Observable<Pump[]> = new Observable<Pump[]>();
  pumpModels$: Observable<PumpModel[]> = new Observable<PumpModel[]>();
  sensors$: Observable<Sensor[]> = new Observable<Sensor[]>();

  constructor(private router: Router,
      private fb: FormBuilder,
      private werfFormTwoService: WerfFormTwoService,
      private route: ActivatedRoute, ) { }

  pumpForm = this.fb.group({
    id: [0, [Validators.required]],
    gridPos: ['', [Validators.required]],
    description: ['']
  });

  get fPump(){
    return this.pumpForm.controls;
  }

  sensorForm = this.fb.group({
    id: [0, [Validators.required]],
    gridPos: ['', [Validators.required]],
    description:  ['', [Validators.required]]
  });

  get fSensor(){
    return this.sensorForm.controls;
  }

  ngOnInit(): void {
    this.pumps$ = this.werfFormTwoService.getPumps();
    this.pumpModels$ = this.werfFormTwoService.getPumptypes();
    this.wharfId = parseInt(JSON.parse(this.route.snapshot.paramMap.get('wharfIid') || '{}'));
    this.sensors$ = this.werfFormTwoService.getSensors();
  }

  onSubmitSensor(){
    this.sensor.id = this.sensorForm.value.id!;
    this.sensor.gridPos = this.sensorForm.value.gridPos!;
    this.sensor.description = this.sensorForm.value.description!;
    this.sensor.wharfID = this.wharfId;
    console.log(this.sensor);
    return this.werfFormTwoService.putSensor(this.sensor, this.sensor.id).subscribe({
      next: () => this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
      this.router.navigate(['admin/werf/form2/' + this.wharfId])),
      error: (e) => (console.log(e.message)),
    });
  }

  onSubmitPump(){
    this.pump.id = this.pumpForm.value.id!;
    this.pump.gridPos = this.pumpForm.value.gridPos!;
    this.pump.description = this.pumpForm.value.description!;
    this.pump.wharfID = this.wharfId;
    console.log(this.pump);
    return this.werfFormTwoService.putPump(this.pump, this.pump.id).subscribe({
      next: () => this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
      this.router.navigate(['admin/werf/form2/' + this.wharfId])),
      error: (e) => (console.log(e.message)),
    });
  }

  next(){
    this.router.navigateByUrl('/admin/werf/form3/' + this.wharfId);
  }

  edit() {
    this.router.navigate(['/admin/werf/form'], { state: { id: this.wharfId, mode: 'edit' } });
  }

  overzicht(){
    this.router.navigateByUrl('/overzicht_werven');
  }
}
