import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { TimeZoneService } from '@core/services/time-zone.service';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import moment from 'moment';
interface DueDateFormGroup {
  dueDate: moment.Moment;
}

@Component({
  selector: 'gc-extend-form-due-date-modal',
  templateUrl: './extend-form-due-date-modal.component.html',
  styleUrls: ['./extend-form-due-date-modal.component.scss']
})
export class ExtendFormDueDateModalComponent extends YCModalComponent<{
  dueDate: string;
}> implements OnInit {
  @Input() dueDate: string;
  @Input() formName: string;
  formGroup: TypeSafeFormGroup<DueDateFormGroup>;

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

  ngOnInit () {
    this.formGroup = this.formBuilder.group<DueDateFormGroup>({
      dueDate: [
        moment(this.dueDate).startOf('day'),
        [
          this.validateDateExtension()
        ]
      ]
    });
  }

  validateDateExtension () {
    return (control: AbstractControl) => {
      const extendedDate = control.value as moment.Moment;
      if (!extendedDate) {
        return null;
      }
      if (extendedDate.isValid()) {
        const endOfToday = moment().endOf('day');
        if ((extendedDate.endOf('day')).isSameOrBefore(endOfToday)) {
          return {
            dateHasToBeAfterToday: {
              i18nKey: 'FORMS:textNewDateMustBeAfterToday',
              defaultValue: 'New date must be after today'
            }
          };
        }
      } else {
        return {
          dateNotValid: {
            i18nKey: 'common:textEnterValidDate',
            defaultValue: 'Please enter a valid date'
          }
        };
      }

      return null;
    };
  }

  onSubmit () {
    let adapted: string = null;
    const dueDate = this.formGroup.value.dueDate;
    if (dueDate) {
      adapted = this.timezoneService.returnEndOfDayUTCDate(
        dueDate
      );
    }
    this.closeModal.emit({
      dueDate: adapted
    });
    this.analyticsService.emitEvent({
      eventName: 'Extend form due date modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}