import {Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from "@angular/core";
import {MatDatepicker} from "@angular/material/datepicker";
import {NgxMaterialTimepickerComponent, NgxMaterialTimepickerToggleComponent} from "ngx-material-timepicker";
import {FormControl, Validators} from "@angular/forms";
import * as moment from "moment";

@Component({
  selector: 'app-date-time-picker',
  templateUrl: './date-time-picker.component.html',
  styleUrls: ['./date-time-picker.component.css']
})
export class DateTimePickerComponent implements OnInit, OnChanges{
  @ViewChild('picker') picker?: MatDatepicker<any>;
  @ViewChild('toggleTimepicker') toggleTimepicker?: NgxMaterialTimepickerComponent
  @Output('onTimeSet') timeSet: EventEmitter<Date> = new EventEmitter<Date>();

  @Input('date') date: Date | undefined

  dateControl: FormControl = new FormControl('', [Validators.required])
  timeControl: FormControl = new FormControl('', [Validators.required])
  constructor() { }

  ngOnInit() {

  }

  ngOnChanges() {
    if(this.date != undefined) {
      this.setDateTime(this.date);
    }
  }

  setDateTime(date: Date) {
    console.log(date)
    this.dateControl.setValue(date);
    const timeString =  date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
    this.timeControl.setValue(timeString);
  }

  openTimePicker() {
    this.toggleTimepicker!.open();
  }

  onTimeSet(time: string) {
    let selectedDate = new Date(this.dateControl.value)
    const [hours, minutes] = time.split(":")
    selectedDate.setHours(parseInt(hours, 10));
    selectedDate.setMinutes(parseInt(minutes, 10));
    this.timeSet.emit(selectedDate);


  }
}