import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { Wharf } from 'src/app/models/Wharf';
import { OverzichtWervenService } from './overzicht-werven.service';
import { ActivatedRoute, Router } from '@angular/router';
import { City } from 'src/app/models/city';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-overzicht-werven',
  templateUrl: './overzicht-werven.component.html',
  styleUrls: ['./overzicht-werven.component.css']
})
export class OverzichtWervenComponent implements OnInit {
  @Input() wharf: Wharf = {
    id: 0,
    nameCode: '',
    cityID: 0,
    streetName: '',
    streetNumber: 0,
    startDate: '',
    endDate: '',
    wharfDepth: 0
  };

  // city
  @Input() city: City = {
    id: 0,
    postalCode: 0,
    name: ''
  }

  cities$: Observable<City[]> = new Observable<City[]>();

  currentDate: Date = new Date();
  Show: boolean = false;

  parseDate(date: string) : Date {
    return new Date(date);
  }

  wharf$: Observable<Wharf[]> = new Observable<Wharf[]>();
  wharfNewDateTime$: Observable<Wharf[]> = new Observable<Wharf[]>();


  constructor(private overzichtWervenService: OverzichtWervenService,
    private router: Router,
    public auth: AuthService
    ) { }

  ngOnInit(): void {
    this.wharf$ = this.overzichtWervenService.getWharfs();
    this.cities$ = this.overzichtWervenService.getCities();
  }

  details(id: number) {
    this.router.navigate(['/grondwaterstand/' + id]);
  }

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

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

  toggle() {
    this.Show = !this.Show;
}
}
