import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
import { BehaviorSubject } from 'rxjs';

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

import { Attendance } from './attendance';
import { AttendanceDataSource } from './attendance-datasource';
import { AttendanceItem } from './attendance-item';
import { AttendanceType } from './attendance-type';
import { AttendanceService } from './attendance.service';

@Component({
  selector: 'app-attendance',
  templateUrl: './attendance.component.html',
  styleUrls: ['./attendance.component.css'],
})
export class AttendanceComponent implements OnInit {
  public attendanceObservable = new BehaviorSubject<AttendanceItem[]>([]);
  dataSource: AttendanceDataSource;
  form: FormGroup;

  info: Attendance;
  attendanceTypes: AttendanceType[];

  displayedColumns = ['code', 'name', 'designation', 'department', 'status', 'prints'];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private dialog: MatDialog,
    private toaster: ToasterService,
    private auth: AuthService,
    private ser: AttendanceService,
  ) {
    this.form = this.fb.group({
      date: '',
      attendances: this.fb.array([]),
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { info: Attendance; attendanceTypes: AttendanceType[] };

      this.info = data.info;
      this.attendanceTypes = data.attendanceTypes;
      this.form.get('date').setValue(moment(this.info.date, 'DD-MMM-YYYY').toDate());
      this.form.setControl(
        'attendances',
        this.fb.array(
          this.info.body.map((x) =>
            this.fb.group({
              attendanceType: x.attendanceType.id,
            }),
          ),
        ),
      );
      this.dataSource = new AttendanceDataSource(this.attendanceObservable);
      this.attendanceObservable.next(this.info.body);
    });
  }

  getClass(index: number) {
    const array = this.form.get('attendances') as FormArray;
    const id = array.controls[index].value.attendanceType;
    const { name } = this.attendanceTypes.filter((x) => x.id === id)[0];
    return name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
  }

  show() {
    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
    this.router.navigate(['/attendance', date]);
  }

  save() {
    this.ser.save(this.getAttendance()).subscribe(
      () => {
        this.toaster.show('Success', '');
      },
      (error) => {
        this.toaster.show('Danger', error);
      },
    );
  }

  getAttendance(): Attendance {
    const formModel = this.form.value;
    this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
    const array = this.form.get('attendances') as FormArray;
    this.info.body.forEach((item, index) => {
      item.attendanceType.id = array.controls[index].value.attendanceType;
    });
    return this.info;
  }
}