import { Component, OnInit } from '@angular/core';
import { MainPageService } from '../../main-page.service';
import { PiperingGroupModel } from '../../../models/dictionaries/pipering-group.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';

declare var $: any;


@Component({
  selector: 'app-pipering-groups-grid',
  templateUrl: './pipering-groups-grid.component.html',
  styleUrls: ['./pipering-groups-grid.component.scss']
})
export class PiperingGroupsGridComponent implements OnInit {
  public isPiperingGroupsHidden = true;
  public piperingGroupsGridData: PiperingGroupModel[];
  public editedPiperingGroup = new PiperingGroupModel();
  public rowNumber: number;
  public headers: string[] = ['Id', 'Name', 'Code', 'Is cold', ''];
  public formGroup: FormGroup;

  constructor(private mainPageService: MainPageService) {}

  public ngOnInit(): void {
    this.loadGridDataFromDb();
    this.mainPageService.deletePiperingGroupSubject.subscribe( (value) => {
      this.piperingGroupsGridData = this.piperingGroupsGridData.filter(x => x._id !== value);
    });
    this.createForm();
  }

  loadGridDataFromDb() {
    this.mainPageService.loadAllPiperingGroups().subscribe((response) => {
      this.piperingGroupsGridData = response.sort(function (a, b) {
        return (a.id < b.id) ? -1 : 1;
      });
    });
  }

  toggle() {
    const actionButtons = $('.mat-icon-button');
    $(actionButtons[1]).css('visibility', 'hidden');
    for (let i = 2; i < actionButtons.length; i += 2) {
        $(actionButtons[i]).css('visibility', 'hidden');
    }
    this.isPiperingGroupsHidden = !this.isPiperingGroupsHidden;
  }

  saveNewPiperingGroup() {
    this.mainPageService.addNewPiperingGroupIntoDb(JSON.stringify(this.editedPiperingGroup)).subscribe((response) => {
      this.editedPiperingGroup._id = response._id;
      this.editedPiperingGroup.id = response.id;
      this.piperingGroupsGridData.push(this.editedPiperingGroup);
      this.editedPiperingGroup = new PiperingGroupModel();
      this.createForm();
    });
  }

  setChoosenElement(element, row) {
    this.editedPiperingGroup = {
      ...element,
    };
    this.rowNumber = row;
    this.createForm();
  }

  editPiperingGroup() {
    console.log(this.piperingGroupsGridData[this.rowNumber]);
    Object.assign(this.piperingGroupsGridData[this.rowNumber], this.editedPiperingGroup);
    this.mainPageService.updatePiperingGroupInDb(JSON.stringify(this.editedPiperingGroup)).subscribe(() => { });
  }

  deletePiperingGroup(element) {
    this.mainPageService.removePiperingGroup(element._id).subscribe(() => { }, () => { });
    this.mainPageService.deletePiperingGroupSubject.next(element._id);
  }

  public prepareCreate() {
    this.editedPiperingGroup = new PiperingGroupModel();
    this.createForm();
  }

  private createForm() {
    this.formGroup = new FormGroup({
      name: new FormControl(this.editedPiperingGroup.name, Validators.required),
      code: new FormControl(this.editedPiperingGroup.code),
      isCold: new FormControl(this.editedPiperingGroup.isCold)
    });
  }
}