import { Component, OnInit } from '@angular/core';
import { MainPageService } from '../../main-page.service';
import { SubcomponentVerificationModel } from '../../../models/dictionaries/subcomponents-verification.model';

declare var $: any;


@Component({
  selector: 'app-subcomponents-verification-grid',
  templateUrl: './subcomponents-verification-grid.component.html',
  styleUrls: ['./subcomponents-verification-grid.component.scss']
})
export class SubcomponentsVerificationGridComponent implements OnInit {
  isSubcomponentsVerificationHidden = true;
  subcomponentVerificationGridData: SubcomponentVerificationModel[];
  templateSubcomponent = new SubcomponentVerificationModel();
  editedSubcomponent = new SubcomponentVerificationModel();
  rowNumber: number;
  headers: string[] = ['Name', 'Description', ''];

  constructor(private mainPageService: MainPageService) {}

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

  loadGridDataFromDb() {
    this.mainPageService.loadAllSubcomponentsForVerification().subscribe((response) => {
      this.subcomponentVerificationGridData = response.sort(function (a, b) {
        return (a.name < b.name) ? -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.isSubcomponentsVerificationHidden = !this.isSubcomponentsVerificationHidden;
  }

  saveNewSubcomponentForVerification() {
    this.mainPageService.addNewSubcomponentForVerificationIntoDb(JSON.stringify(this.templateSubcomponent)).subscribe((response) => {
      this.templateSubcomponent._id = response;
      this.subcomponentVerificationGridData
  .push(this.templateSubcomponent);
      this.templateSubcomponent = new SubcomponentVerificationModel();
    });
  }

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

  editSubcomponentForVerification() {
    console.log(this.subcomponentVerificationGridData[this.rowNumber]);
    Object.assign(this.subcomponentVerificationGridData[this.rowNumber], this.editedSubcomponent);
    this.mainPageService.updateSubcomponentForVerificationInDb(JSON.stringify(this.editedSubcomponent)).subscribe(() => { });
  }

  deleteSubcomponentForVerification(element) {
    this.mainPageService.removeSubcomponentForVerification(element._id).subscribe(() => { }, () => { });
    this.mainPageService.deleteSubcomponentForVerificationSubject.next(element._id);
  }
}