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

declare var $: any;


@Component({
  selector: 'app-materials-grid',
  templateUrl: './materials-grid.component.html',
  styleUrls: ['./materials-grid.component.scss']
})
export class MaterialsGridComponent implements OnInit {
  isMaterialsHidden = true;
  materialsGridData: MaterialModel[];
  editedMaterial = new MaterialModel();
  materialForm: FormGroup;
  rowNumber: number;
  headers: string[] = ['Name', 'Description', ''];

  constructor(private mainPageService: MainPageService) {}

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

  loadGridDataFromDb() {
    this.mainPageService.loadAllMaterials().subscribe((response) => {
      this.materialsGridData = 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.isMaterialsHidden = !this.isMaterialsHidden;
  }

  saveNewMaterial() {
    this.mainPageService.addNewMaterialIntoDb(JSON.stringify(this.editedMaterial)).subscribe((response) => {
      this.editedMaterial._id = response;
      this.materialsGridData.push(this.editedMaterial);
      this.editedMaterial = new MaterialModel();
    });
  }

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

  editMaterial() {
    console.log(this.materialsGridData[this.rowNumber]);
    Object.assign(this.materialsGridData[this.rowNumber], this.editedMaterial);
    this.mainPageService.updateMaterialInDb(JSON.stringify(this.editedMaterial)).subscribe((response) => {});
  }

  deleteMaterial(element) {
    this.mainPageService.removeMaterial(element._id).subscribe((res) => {}, (error: any) => {});
    this.mainPageService.deleteMaterialSubject.next(element._id);
  }

  prepareCreate() {
    this.editedMaterial = new MaterialModel();
    this.createForm();
  }

  private createForm() {
    this.materialForm = new FormGroup({
      name: new FormControl(this.editedMaterial.name, Validators.required),
    description: new FormControl(this.editedMaterial.description),
    rStabName: new FormControl(this.editedMaterial.rStabName),
    eModule: new FormControl(this.editedMaterial.eModule, Validators.pattern('^\\d+(?:\\.\\d{1,10})?$')),
    gModule: new FormControl(this.editedMaterial.gModule, Validators.pattern('^\\d+(?:\\.\\d{1,10})?$')),
    fu: new FormControl(this.editedMaterial.fu, Validators.pattern('^\\d+(?:\\.\\d{1,10})?$')),
    ni: new FormControl(this.editedMaterial.ni, Validators.pattern('^\\d+(?:\\.\\d{1,10})?$')),
    density: new FormControl(this.editedMaterial.density, Validators.pattern('^\\d+(?:\\.\\d{1,10})?$')),
    });
  }

}