// app
import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Input } from '@angular/core';
import { Output } from '@angular/core';
import { EventEmitter } from '@angular/core';

// libs
import moment from 'moment';


type DatePeriodForm = {
	dateFrom: FormControl<Date | null>;
	dateTo: FormControl<Date | null>;
};

@Component({
  selector: 'app-date-period',
  templateUrl: './date-period.component.html',
  styleUrls: ['./date-period.component.css']
})
export class DatePeriodComponent {

	@Input('from') dateFrom!: Date;
	@Input('to') dateTo!: Date;

	@Output() onChange: EventEmitter<Date[]> = new EventEmitter<Date[]>();

	form!: FormGroup<DatePeriodForm>;

	constructor(
		private fb: FormBuilder
	) {

	}

	ngOnInit() {
		this.form = this.fb.group({
			dateFrom: [
				this.dateFrom,
				[Validators.required],
			],
			dateTo: [
				this.dateTo,
				[Validators.required],
			],
		});
	}

	onSubmitClick() {
	}

	onInputChange() {
		this.onChange.emit([this.form.value.dateFrom!, this.form.value.dateTo!]);
	}
}
