import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatDatepicker } from '@angular/material/datepicker';
import * as moment from 'moment';
import { Moment } from 'moment';

import { ToasterService } from '../core/toaster.service';

import { EmployeeFunctionsService } from './employee-functions.service';

@Component({
  selector: 'app-employee-functions',
  templateUrl: './employee-functions.component.html',
  styleUrls: ['./employee-functions.component.css'],
})
export class EmployeeFunctionsComponent {
  creditSalaryForm: FormGroup<{
    date: FormControl<moment.Moment>;
  }>;

  attendanceRecordForm: FormGroup<{
    startDate: FormControl<moment.Moment>;
    finishDate: FormControl<moment.Moment>;
  }>;

  fingerprintFile: File | null = null;

  constructor(
    private toaster: ToasterService,
    private ser: EmployeeFunctionsService,
  ) {
    const startDate = moment().date(1);
    const finishDate = moment().date(startDate.daysInMonth());
    this.creditSalaryForm = new FormGroup({
      date: new FormControl(finishDate, { nonNullable: true }),
    });
    this.attendanceRecordForm = new FormGroup({
      startDate: new FormControl(moment(), { nonNullable: true }),
      finishDate: new FormControl(moment(), { nonNullable: true }),
    });
  }

  chosenYearHandler(normalizedYear: Moment) {
    const ctrlValue = this.creditSalaryForm.value.date ?? moment();
    ctrlValue.year(normalizedYear.year());
    ctrlValue.date(ctrlValue.daysInMonth());
    this.creditSalaryForm.setValue({ date: ctrlValue });
  }

  chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.creditSalaryForm.value.date ?? moment();
    ctrlValue.month(normlizedMonth.month());
    ctrlValue.date(ctrlValue.daysInMonth());
    this.creditSalaryForm.setValue({ date: ctrlValue });
    datepicker.close();
  }

  creditSalary() {
    const date = (this.creditSalaryForm.value.date ?? moment()).format('DD-MMM-YYYY');
    if (!date) {
      this.toaster.show('Danger', 'Please choose a valid date.');
      return;
    }
    this.ser.creditSalary(date).subscribe(
      () => {
        this.toaster.show('Success', 'Salaries Credited');
      },
      (error) => {
        this.toaster.show('Danger', error);
      },
    );
  }

  attendanceRecordUrl() {
    const startDate = (this.attendanceRecordForm.value.startDate ?? moment()).format('DD-MMM-YYYY');
    const finishDate = (this.attendanceRecordForm.value.finishDate ?? moment()).format(
      'DD-MMM-YYYY',
    );
    if (!startDate || !finishDate) {
      // this.toaster.show('Danger', 'Please choose a start and finish date.');
      return '';
    }
    return `/attendance-report?s=${startDate}&f=${finishDate}`;
  }

  fingerPrintUrl() {
    const startDate = (this.attendanceRecordForm.value.startDate ?? moment()).format('DD-MMM-YYYY');
    const finishDate = (this.attendanceRecordForm.value.finishDate ?? moment()).format(
      'DD-MMM-YYYY',
    );
    if (!startDate || !finishDate) {
      // this.toaster.show('Danger', 'Please choose a start and finish date.');
      return '';
    }
    return `/fingerprint-report?s=${startDate}&f=${finishDate}`;
  }

  detectFiles(event: Event) {
    this.fingerprintFile = ((event.target as HTMLInputElement).files as FileList)[0];
  }

  uploadFingerprints() {
    if (!this.fingerprintFile) {
      this.toaster.show('Danger', 'Please choose a file first!');
      return;
    }
    this.ser.uploadFingerprints(this.fingerprintFile).subscribe(
      () => {
        this.toaster.show('Success', 'Fingerprints uploaded');
      },
      (error) => {
        this.toaster.show('Danger', error);
      },
    );
  }
}