import { Component, OnInit, EventEmitter, Output, OnDestroy, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { GaResponse } from '../../../../../gaji-id-resources/gaji-id-api-response.model';
import { MatAccordion } from '@angular/material';

import { TunjanganPotonganDetail } from '../../../../../gaji-id-resources/resources/payroll/transaction/tunjangan-potongan/tunjangan-potongan-detail.model';
import { TunjanganPotonganView } from '../../../../../gaji-id-resources/resources/payroll/transaction/tunjangan-potongan/tunjangan-potongan-view.model';
import { TunjanganPotonganViewService, TunjanganPotonganViewSearchParams, TunjanganPotonganViewSorts } from '../../../../../gaji-id-resources/resources/payroll/transaction/tunjangan-potongan/tunjangan-potongan-view.service';

import { Employee } from '../../../../../gaji-id-resources/resources/employee/data/employee/employee.model';
import { EmployeeService } from '../../../../../gaji-id-resources/resources/employee/data/employee/employee.service';
import { PayrollGroup } from '../../../../../gaji-id-resources/resources/master/payroll-group/payroll-group.model';
import { PayrollGroupService } from '../../../../../gaji-id-resources/resources/master/payroll-group/payroll-group.service';
import { Position } from '../../../../../gaji-id-resources/resources/master/position/position.model';
import { PositionService } from '../../../../../gaji-id-resources/resources/master/position/position.service';

import { ContentAlertService } from '../../../../../components/messages/alerts/content-alert/content-alert.service';
import { ConfirmDialogService } from '../../../../../components/confirm-dialog/confirm-dialog.service';
import { SnackBarService } from '../../../../../components/messages/snackbar/snackbar.service';
import { UiBlockService } from '../../../../../components/ui-block/ui-block.service';

import { JExcelComponent } from '../../../../../components/jexcel/jexcel.component';
import { JExcelValidation, JExcelOptions } from '../../../../../components/jexcel/jexcel';

@Component({
  selector: 'app-tunjangan-potongan-browse',
  templateUrl: './tunjangan-potongan-browse.component.html'
})
export class TunjanganPotonganBrowseComponent implements OnInit, OnDestroy {

  @ViewChild('filterPanel') filterPanel: MatAccordion;
  @ViewChild('jexcel') public jexcel: JExcelComponent;

  @Output() public onInputTunjangan: EventEmitter<any> = new EventEmitter();
  @Output() public onInputPotongan: EventEmitter<any> = new EventEmitter();
  @Output() public onEditHapusMassal: EventEmitter<any> = new EventEmitter();
  @Output() public onEdit: EventEmitter<any> = new EventEmitter();

  public searchParams: TunjanganPotonganViewSearchParams = {};
  public sorts: TunjanganPotonganViewSorts = { karyawanName: 'asc' };
  public options: JExcelOptions;
  public isLoadingResults: boolean = false;

  public dataTables: TunjanganPotonganView[];
  public customBrowseTbl: any[];

  public employeeList: Employee[] = [];
  public mstPayrollGroups: PayrollGroup[] = [];
  public mstPositions: Position[] = [];
  public filterForm: FormGroup;
  private ngUnsubscribe: Subject<boolean> = new Subject();

  constructor(
    private fb: FormBuilder,
    private contentAlertService: ContentAlertService,
    private confirmDialogService: ConfirmDialogService,
    private uiBlockService: UiBlockService,
    private employeeService: EmployeeService,
    private payrollGroupService: PayrollGroupService,
    private positionService: PositionService,
    private tunjanganPotonganViewService: TunjanganPotonganViewService
  ) { }

  ngOnInit() {
    this.initFilterForm();
    this.initOptions();
    this.initPayrollGroups();
    this.initPositions();
    this.filter();
    this.jexcel.setSpreadsheet(this.options, this.customBrowseTbl, false);
  }

  public ngOnDestroy() {
    this.ngUnsubscribe.next(true);
    this.ngUnsubscribe.complete();
  }

  private initFilterForm() {
    this.filterForm = this.fb.group({
      karyawan: null,
      mstPayrollGroup: null,
      mstPosition: null,
      beginYearMonth: null,
      endYearMonth: null,
    });
  }

  private initOptions() {
    this.options = {
      columns: [
        { type: 'text', columnName: 'karyawan.name', headerText: 'Karyawan', validations: [], readOnly: true },
        { type: 'yearmonth', columnName: 'tahunBulanGaji', headerText: 'Bulan', validations: [], readOnly: true }
      ],
      editable: false,
      columnResize: true,
      allowInsertColumn: false,
      allowInsertRow: false,
      allowManualInsertColumn: false,
      allowManualInsertRow: false,
      allowDeleteColumn: false,
      allowDeleteRow: false,
      toolbar: false
    };
  }

  public onKaryawanLazyLoad(name: string) {
    this.isLoadingResults = true;
    this.employeeService.search({ name: name })
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (result) => {
          this.isLoadingResults = false;
          this.employeeList = result.data;
        },
        (error) => {
          this.isLoadingResults = false;
          this.contentAlertService.error(error.errors);
        },
        () => { this.isLoadingResults = false; }
      );
  }

  private initPayrollGroups() {
    this.uiBlockService.showUiBlock();
    this.payrollGroupService.search({ isActive: true }).pipe(takeUntil(this.ngUnsubscribe)).subscribe(
      (result) => {
        this.uiBlockService.hideUiBlock();
        this.mstPayrollGroups = result.data;
      },
      (error) => {
        this.uiBlockService.hideUiBlock();
        this.contentAlertService.error(error.errors);
      },
      () => { this.uiBlockService.hideUiBlock(); }
    );
  }

  private initPositions() {
    this.uiBlockService.showUiBlock();
    this.positionService.search({ active: true }).pipe(takeUntil(this.ngUnsubscribe)).subscribe(
      (result) => {
        this.uiBlockService.hideUiBlock();
        this.mstPositions = result.data;
      },
      (error) => {
        this.uiBlockService.hideUiBlock();
        this.contentAlertService.error(error.errors);
      },
      () => { this.uiBlockService.hideUiBlock(); }
    );
  }

  public addTunjangan() {
    this.onInputTunjangan.next();
  }

  public addPotongan() {
    this.onInputPotongan.next();
  }

  public editMassal() {
    this.onEditHapusMassal.next();
  }

  public edit() {
    this.onEdit.next();
  }

  public filter() {
    this.filterPanel.closeAll();

    var karyawanIdFilter = null;
    var mstPayrollGroupIdFilter = null;
    var karyawanPositionIdFilter = null;

    if (this.filterForm.value.karyawan) {
      karyawanIdFilter = this.filterForm.value.karyawan.id;
    }

    if (this.filterForm.value.mstPayrollGroup) {
      mstPayrollGroupIdFilter = this.filterForm.value.mstPayrollGroup.id;
    }

    if (this.filterForm.value.mstPosition) {
      karyawanPositionIdFilter = this.filterForm.value.mstPosition.id;
    }

    if ((this.filterForm.value.beginYearMonth) && (this.filterForm.value.endYearMonth)) {
      this.searchParams = {
        karyawanId: karyawanIdFilter,
        kelompokPayrollId: mstPayrollGroupIdFilter,
        karyawanPositionId: karyawanPositionIdFilter,
        tahunBulanGajiFrom: this.filterForm.value.beginYearMonth,
        tahunBulanGajiTo: this.filterForm.value.endYearMonth
      };
    }

    this.uiBlockService.showUiBlock();
    this.tunjanganPotonganViewService
      .searchView(this.searchParams, this.sorts)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (result: GaResponse<TunjanganPotonganView[]>) => {
          this.uiBlockService.hideUiBlock();

          this.dataTables = result.data;
          this.customBrowseTbl = [];
          this.initOptions();
          var listHeader = {};
          for (let i = 0; i < result.data.length; i++) {
            const dataTblRow: any = {};
            dataTblRow.karyawan = result.data[i].karyawan;
            dataTblRow.tahunBulanGaji = result.data[i].tahunBulanGaji;
            for (let j = 0; j < result.data[i].listPendapatanPotonganKaryawan.length; j++) {
              const newHeaderName = result.data[i].listPendapatanPotonganKaryawan[j].pendapatanPotongan.name;
              const newHeaderCode = result.data[i].listPendapatanPotonganKaryawan[j].pendapatanPotongan.code;
              const newHeaderValue = result.data[i].listPendapatanPotonganKaryawan[j].totalNilaiAkhir;
              dataTblRow[newHeaderCode] = newHeaderValue;
              if (!listHeader[newHeaderName]) {
                listHeader[newHeaderName] = newHeaderName;
                this.options.columns.push({ type: 'numeric', columnName: newHeaderCode, headerText: newHeaderName, validations: [], readOnly: true });
              }
            }

            this.customBrowseTbl.push(dataTblRow);
          }
          this.jexcel.updateSettings(this.options, this.customBrowseTbl, false);
        },
        (error) => {
          this.uiBlockService.hideUiBlock();
          this.contentAlertService.error(error.errors);
        },
        () => { this.uiBlockService.hideUiBlock(); }
      );
  }
}