import { Component, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { ProgramDeadline } from '@core/typings/program.typing';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import moment, { Moment } from 'moment';
interface ProgramDeadlineFormGroup {
  date: Moment;
  name: string;
  description: string;
}

@Component({
  selector: 'gc-program-deadline-modal',
  templateUrl: './program-deadline-modal.component.html',
  styleUrls: ['./program-deadline-modal.component.scss']
})
export class ProgramDeadlineModalComponent extends YCModalComponent<ProgramDeadlineFormGroup> implements OnInit  {
  formGroup: TypeSafeFormGroup<ProgramDeadlineFormGroup>;
  deadline: ProgramDeadline;
  defaultDate = moment().add(6, 'months');

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.formGroup = this.formBuilder.group<ProgramDeadlineFormGroup>({
      date: [
        this.deadline ? moment(this.deadline.date) : this.defaultDate,
        Validators.required
      ],
      name: [
        this.deadline ? this.deadline.name : '',
        [
          Validators.required,
          Validators.maxLength(50)
        ]
      ],
      description: [
        this.deadline ? this.deadline.description : '',
        Validators.required
      ]
    });
  }

  onCancel () {
    this.closeModal.emit();
  }

  submit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Program deadlines save',
      eventType: EventType.Click,
      extras: null
    });
  }
}