import { Component, OnInit, Input } from '@angular/core';
import { MainPageService } from '../../../main-page.service';
import { CrossSectionModel } from '../../../../models/parts/cross-section.model';
import { CrossSectionManagmentComponent } from '../cross-sections-managment/cross-sections-managment.component';
import { SystemModel } from '../../../../models/dictionaries/system.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';

declare var $: any;


@Component({
  selector: 'app-cross-section-grid',
  templateUrl: './cross-sections-grid.component.html',
  styleUrls: ['./cross-sections-grid.component.scss']
})
export class CrossSectionGridComponent implements OnInit {
  @Input() crossSectionComponent: CrossSectionManagmentComponent;
  isCrossSectionHidden = true;
  crossSectionGridData: CrossSectionModel[] = [];
  systemsArray: SystemModel[] = [];
  public selectedRowId;
  templateCrossSection = new CrossSectionModel();
  headers: string[] = ['Name', 'Description'];
  public formGroup: FormGroup;

  constructor(private mainPageService: MainPageService) { }

  public ngOnInit(): void {
    this.loadData();
    // this.mainPageService.mysubject.subscribe((value) => {
    //   this.updateCrossSectionInDb(value);
    // });
    this.mainPageService.deleteCrossSectionSubject.subscribe((value) => {
      this.crossSectionGridData = this.crossSectionGridData.filter(x => x._id !== value);
    });
    this.createForm();
  }

  loadData(): void {
    this.mainPageService.loadAllSystems().subscribe((response) => {
      this.systemsArray = response;
    });
    this.mainPageService.loadAllCrossSections().subscribe((response) => {
      this.crossSectionGridData = response;
    });
  }

  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.isCrossSectionHidden = !this.isCrossSectionHidden;
  }

  onConnectorClick(sender) {
    this.crossSectionComponent.showCrossSection(sender);
  }

  onRowClick(row, id) {
    this.selectedRowId = id;
    this.crossSectionComponent.showCrossSection(this.crossSectionGridData[row]);
  }

  updateCrossSectionInDb(id) {
    let dataToSend;
    let preparedData;
    for (const item of this.crossSectionGridData) {
      if (item._id === id) {
        dataToSend = item;
        break;
      }
    }
    for (const item of this.crossSectionGridData) {
      if (item._id === id) {
        preparedData = item;
        break;
      }
    }
    preparedData.articleNumber = dataToSend.articleNumber;
    preparedData.description = dataToSend.description;
    preparedData.name = dataToSend.name;
    this.mainPageService.updateCrossSectionInDb(JSON.stringify(preparedData)).subscribe(() => { });
  }

  saveNewCrossSection() {
    this.mainPageService.addNewCrossSectionIntoDb(JSON.stringify(this.templateCrossSection)).subscribe((response) => {
      this.templateCrossSection._id = response;
      this.crossSectionGridData.push(this.templateCrossSection);
      this.templateCrossSection = new CrossSectionModel();
    });
  }

  public prepareCreate() {
    this.templateCrossSection = new CrossSectionModel();
    this.createForm();
  }

  private createForm() {
    this.formGroup = new FormGroup({
      name: new FormControl(this.templateCrossSection.name, Validators.required),
      description: new FormControl(this.templateCrossSection.description),
      system: new FormControl(this.templateCrossSection.system, Validators.required),
      duenqName: new FormControl(this.templateCrossSection.duenqName, Validators.maxLength(50)),
    });
  }
}