import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatRadioChange } from '@angular/material/radio';
import { MatSort, SortDirection } from '@angular/material/sort';
import { ActivatedRoute, Router } from '@angular/router';
import moment from 'moment';

import { EntriesDatasource } from './entries-datasource';
import { Report } from './report';

@Component({
  selector: 'app-entries',
  templateUrl: './entries.component.html',
  styleUrls: ['./entries.component.css'],
})
export class EntriesComponent implements OnInit {
  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort?: MatSort;
  info: Report = new Report();
  dataSource: EntriesDatasource = new EntriesDatasource(this.info.report, 0);
  form: FormGroup<{
    startDate: FormControl<Date>;
    finishDate: FormControl<Date>;
    posted: FormControl<boolean | null>;
    issue: FormControl<boolean>;
  }>;

  displayedColumns = ['date', 'voucherType', 'narration', 'debitNames', 'creditNames', 'amount', 'user'];

  posted: boolean | null = null;
  issue = false;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
  ) {
    this.form = new FormGroup({
      startDate: new FormControl(new Date(), { nonNullable: true }),
      finishDate: new FormControl(new Date(), { nonNullable: true }),
      posted: new FormControl<boolean | null>(null),
      issue: new FormControl<boolean>(false, { nonNullable: true }),
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { info: Report };
      this.info = data.info;
      const queryMap = this.route.snapshot.queryParamMap;
      const startDate = moment(queryMap.get('s') || undefined, 'DD-MMM-YYYY').toDate();
      const finishDate = moment(queryMap.get('f') || undefined, 'DD-MMM-YYYY').toDate();
      const postedO = queryMap.get('p');
      this.posted = postedO !== null ? postedO === 'true' : null;
      const pageSizeO = queryMap.get('ps');
      const pageSize = pageSizeO !== null ? +pageSizeO : 50;
      const pageIndexO = queryMap.get('pi');
      const pageIndex = pageIndexO !== null ? +pageIndexO : 0;
      const activeSortO = queryMap.get('a');
      const activeSort = activeSortO !== null ? (activeSortO as string) : 'date';
      const sortDirectionO = queryMap.get('d');
      const sortDirection = sortDirectionO !== null ? (sortDirectionO as SortDirection) : 'desc';
      const issueO = queryMap.get('i');
      this.issue = issueO !== null ? issueO === 'true' : false;
      this.form.setValue({
        startDate: startDate,
        finishDate: finishDate,
        posted: this.posted,
        issue: this.issue,
      });
      if (this.posted === null || this.posted) {
        this.form.controls.issue.enable();
      } else {
        this.form.controls.issue.disable();
      }
      this.dataSource = new EntriesDatasource(
        this.info.report,
        this.info.counts,
        this.paginator,
        this.sort,
        pageSize,
        pageIndex,
        activeSort,
        sortDirection,
      );
    });
    this.sort?.sortChange.subscribe(() =>
      this.router.navigate([], {
        relativeTo: this.route,
        queryParams: { a: this.sort?.active ?? 'date', d: this.sort?.direction },
        queryParamsHandling: 'merge',
      }),
    );
    this.paginator?.page.subscribe(() =>
      this.router.navigate([], {
        relativeTo: this.route,
        queryParams: { ps: this.paginator?.pageSize, pi: this.paginator?.pageIndex },
        queryParamsHandling: 'merge',
      }),
    );
  }

  refresh() {
    const formModel = this.form.value;
    const startDate = moment(formModel.startDate).format('DD-MMM-YYYY');
    const finishDate = moment(formModel.finishDate).format('DD-MMM-YYYY');
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: { s: startDate, f: finishDate },
      queryParamsHandling: 'merge',
    });
  }

  togglePosted($event: MatRadioChange) {
    this.posted = $event.value;
    if (this.posted === false) {
      this.issue = false;
    }
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: { p: this.posted, i: this.issue || null },
      queryParamsHandling: 'merge',
    });
  }

  toggleIssue() {
    this.issue = !this.issue;
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: { i: this.issue || null },
      queryParamsHandling: 'merge',
    });
  }
}