import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
import { MatDialog } from '@angular/material/dialog';
import { EncService } from 'src/app/services/enc/enc.service';
import { ResourcesService } from 'src/app/services/resources/resources.service';
import { HistoryVacationComponent } from './history-vacation/history-vacation.component';
import { Router } from '@angular/router';

@Component({
  selector: 'app-vacation-management',
  templateUrl: './vacation-management.component.html',
  styleUrls: ['./vacation-management.component.css'],
  providers: [
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: DefaultMatCalendarRangeStrategy,
    },
  ]
})
export class VacationManagementComponent {

  public isLoading: boolean;
  public isLoadingForm: boolean;
  public formGroup: FormGroup;
  
  public selectedDateRange!: DateRange<Date>;
  public daysVacation: number;
  public diffVacation: number;
  public isFilter: boolean;

  constructor(
    public resourcesService: ResourcesService,
    private _encService: EncService,
    private _router: Router,
    private _dialog: MatDialog,
  ) {
    this.isLoading = false;
    this.isLoadingForm = false;
    
    this.daysVacation = 10;
    this.diffVacation = 0;
    this.isFilter = false;
    this.formGroup = this.createFormGroup();

  }

  private createFormGroup() {
    return new FormGroup({
      FECHA_INICIO: new FormControl<Date | null>(null),
      FECHA_FIN: new FormControl<Date | null>(null),
      DIFF_DAYS: new FormControl<Date | null>(null),
    }); 
  }

  _onSelectedChange(date: Date): void {
    if ( this.selectedDateRange && this.selectedDateRange.start && date > this.selectedDateRange.start && !this.selectedDateRange.end ) {
      this.selectedDateRange = new DateRange( this.selectedDateRange.start, date );
      this.setDate();
    } else {
      this.selectedDateRange = new DateRange(date, null);
      this.isFilter = false;
      this.daysVacation = 10;
      this.diffVacation = 0;
    }
  }

  private setDate() {
    let startDateCalendar = this.selectedDateRange.start;
    if (startDateCalendar === null) {
      return;
    }
    let startDate: Date = new Date(startDateCalendar);
    let strStartDate:string = this.resourcesService.getDateFormatCalendar(startDate);
    strStartDate = this.resourcesService.formatOnlyDate(strStartDate);
    this.formGroup.controls['FECHA_INICIO'].setValue(strStartDate);
    
    
    let endDateCalendar = this.selectedDateRange.end;
    if (endDateCalendar === null) {
      return;
    }
    let endDate: Date = new Date(endDateCalendar);
    let strEndDate:string = this.resourcesService.getDateFormatCalendar(endDate);
    strEndDate = this.resourcesService.formatOnlyDate(strEndDate);
    this.formGroup.controls['FECHA_FIN'].setValue(strEndDate);


    let diffDays: number = endDate.getTime() - startDate.getTime();
    diffDays = diffDays / (1000*60*60*24);
    diffDays = diffDays + 1;

    
    if (diffDays > this.daysVacation ) {
      this.resourcesService.openSnackBar(`Los días de vacaciones seleccionados no deben sobrepasar los días de vacaciones disponibles.`);
      return;
    }
    
    this.diffVacation = diffDays;
    this.isFilter = true;
    this.daysVacation = this.daysVacation - diffDays;

    console.log();
    
  }

  public openHistory() {
    this._router.navigate(['/sam/history-vacation']);
  }
}
