import { Component, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { MatDialog } from '@angular/material';
import { Router } from '@angular/router';
import { HBORSettingsService } from '../services/hbor-settings.service';

declare function require(moduleName: string): any;
@Component({
  selector: 'hbor-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit, OnDestroy {
  @Output() themePicked: EventEmitter<any> = new EventEmitter<any>();
  subscriptionRowLimit: Subscription;
  rowLimit = 15;

  constructor(public dialog: MatDialog,
    private hborSettingsService: HBORSettingsService, private _fb: FormBuilder, private cookieService: CookieService,
    private router: Router) {
  }

  ngOnInit() {
    this.subscriptionRowLimit = this.hborSettingsService.rowLimit$.subscribe(
      data => {
        if (data) {
          this.rowLimit = data;
        }
      });
    if (this.cookieService.check('TableRowLimit')) {
      this.hborSettingsService.publishDataRowLimit(parseInt(this.cookieService.get('TableRowLimit')));
      this.rowLimit = parseInt(this.cookieService.get('TableRowLimit'));
    }
  }


  ngOnDestroy() {
    this.subscriptionRowLimit.unsubscribe();
  }

  updateRowLimitClick(event) {
    this.hborSettingsService.publishDataRowLimit(event);
    this.rowLimit = event;
    this.cookieService.set('TableRowLimit', event);
  }
}