import { Component, OnInit, DoCheck, Input, ViewChild , AfterViewInit, ElementRef, Renderer2   } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';

import { Observable, of } from 'rxjs';
import { catchError, debounceTime, distinctUntilChanged, tap, map, switchMap, merge, filter } from 'rxjs/operators';

@Component({
  selector: 'app-add-trail',
  templateUrl: './add-trail.component.html',
  styleUrls: ['./add-trail.component.scss']
})
export class AddTrailComponent implements OnInit, DoCheck, AfterViewInit {

    @Input()
    showValidations;
    
    addTrailForm: FormGroup;
    trail_name: FormControl;
    lat_start: FormControl;
    long_start: FormControl;
    lat_end: FormControl;
    long_end: FormControl;
    
    showEditMess : boolean = false;
    disabledStart : boolean = false;
    disabledEnd : boolean = false;
    latitude = 49.822377;
    longitude = 19.058384;
    mapTypeId = 'terrain';
    markers = [];
    saveAttr : boolean = true;
    private counter : number = 1;
    
    
    constructor(){}
  
    addMarker(lat: number, lng: number) {
        if(this.counter<3){
            if(this.counter==1){
                this.lat_start.setValue(lat);
                this.long_start.setValue(lng);
                this.disabledStart = true;
            }else if(this.counter==2){
                this.lat_end.setValue(lat);
                this.long_end.setValue(lat);
                this.disabledEnd = true;
            }
            
            this.markers.push({ lat, lng, alpha: 0.4 });
        }
            
        this.counter++;
    }
    
    
    ngOnInit() {
        this.createFormControls();
        this.createForm();
    }
    
  createFormControls() {
    this.trail_name = new FormControl('', [Validators.required]);
    this.lat_start = new FormControl('', [Validators.required]);
    this.long_start = new FormControl('', [Validators.required]);
    this.lat_end = new FormControl('', [Validators.required]);
    this.long_end = new FormControl('', [Validators.required]);
  }

  createForm() {
    this.addTrailForm = new FormGroup({
      trail_name: this.trail_name,
      lat_start: this.lat_start,
      long_start: this.long_start,
      lat_end: this.lat_end,
      long_end: this.long_end,
    });
  }

  ngDoCheck() {
        
        if (this.showValidations) {
          this.addTrailForm.controls['trail_name'].markAsTouched();
          this.addTrailForm.controls['lat_start'].markAsTouched();
          this.addTrailForm.controls['long_start'].markAsTouched();
          this.addTrailForm.controls['lat_end'].markAsTouched();
          this.addTrailForm.controls['long_end'].markAsTouched();
        } else if (this.showValidations === false) {
          this.addTrailForm.controls['trail_name'].markAsUntouched();
          this.addTrailForm.controls['lat_start'].markAsTouched();
          this.addTrailForm.controls['long_start'].markAsTouched();
          this.addTrailForm.controls['lat_end'].markAsTouched();
          this.addTrailForm.controls['long_end'].markAsTouched();
        }
        
        if(this.addTrailForm.status == 'VALID'){
            this.saveAttr = false;
        }
        
  }
  
    ngAfterViewInit() {
    }
  
    saveItem(){
        console.log( 'save to database' );
        console.log( this.addTrailForm.value )
        
    }
    
    deleteMarkers(){
        this.markers.length = 0;
        this.counter = 1;
        this.lat_start.setValue('');
        this.long_start.setValue('');
        this.lat_end.setValue('');
        this.long_end.setValue('');
        if(this.addTrailForm.status != 'VALID'){
            this.saveAttr = true;
        }
    }
    
    

}