import { Component, OnInit, Input } from '@angular/core';
import { MainPageService } from '../../../main-page.service';
import { SystemModel } from '../../../../models/dictionaries/system.model';
import { CorosiveProtectionModel } from '../../../../models/dictionaries/corosive-protection.model';
import { UniversalConnectorModel, ConnectorType } from '../../../../models/parts/universal-connector.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PipeFasteningsManagmentComponent } from '../../../../main-page/master-data/pipe-fastening/pipe-fastening-managment/pipe-fastening-managment.component';

declare var $: any;

@Component({
  selector: 'app-pipe-fastenings-grid',
  templateUrl: './pipe-fastening-grid.component.html',
  styleUrls: ['./pipe-fastening-grid.component.scss']
})
export class PipeFasteningsGridComponent implements OnInit {
  @Input() pipeFasteningComponent: PipeFasteningsManagmentComponent;
  isPipeFasteningHidden = true;
  pipeFasteningsGridData: UniversalConnectorModel[] = [];
  pipeFasteningsGridDataOrigin: UniversalConnectorModel[] = [];
  templatePipeFastening = new UniversalConnectorModel(ConnectorType.PipeFastening);
  public selectedRowId;
  public systemsArray: SystemModel[] = [];
  public corrosionProtectionsArray: CorosiveProtectionModel[] = [];
  public pipeFasteningGroupsArray: any[] = [];
  public formGroup: FormGroup;

  headers: string[] = ['Article no.', 'Name'];
  constructor(private mainPageService: MainPageService) {}

  public ngOnInit(): void {
    this.loadData();
    // this.mainPageService.mysubject.subscribe( (value) => {
    //   this.updatePipeFasteningsInDb(value);
    //   this.pipeFasteningsGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    // });
    this.mainPageService.deleteUniversalConnectorSubject.subscribe( (value) => {
      this.pipeFasteningsGridData = this.pipeFasteningsGridData.filter(x => x._id !== value);
      this.pipeFasteningsGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    });
    this.createForm();
  }


  loadData(): void {
    this.mainPageService.loadAllSystems().subscribe((response) => {
      this.systemsArray = response;
    });
    this.mainPageService.loadAllCorosionProtections().subscribe((response) => {
      this.corrosionProtectionsArray = response;
    });
    this.mainPageService.loadSpecificConnectors(ConnectorType.PipeFastening).subscribe((response) => {
      this.pipeFasteningsGridData = response;
      this.pipeFasteningsGridDataOrigin = response;
      this.pipeFasteningsGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
      this.pipeFasteningsGridDataOrigin.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    });
    this.mainPageService.loadAllPipeFasteningGroups().subscribe((response) => {
      this.pipeFasteningGroupsArray = 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.isPipeFasteningHidden = !this.isPipeFasteningHidden;
  }

  onbasesClick(sender) {
    this.pipeFasteningComponent.showPipeFastening(sender);
  }

  onRowClick(row, id) {
    this.selectedRowId = id;
    this.pipeFasteningComponent.showPipeFastening(this.pipeFasteningsGridData[row]);
  }

  updatePipeFasteningsInDb(id) {
    let dataToSend;
    let preparedData;
    for (const item of this.pipeFasteningsGridData) {
      if (item._id === id) {
        dataToSend = item;
        break;
      }
    }
    for (const item of this.pipeFasteningsGridData) {
      if (item._id === id) {
         preparedData = item;
        break;
      }
    }
    preparedData.articleNumber = dataToSend.articleNumber;
    preparedData.description = dataToSend.description;
    preparedData.name = dataToSend.name;
    this.mainPageService.updateUniversalConnectorInDb(JSON.stringify(preparedData)).subscribe(() => { });
    this.pipeFasteningsGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
  }

  saveNewPipeFastening() {
    this.mainPageService.addNewUniversalConnectorIntoDb(JSON.stringify(this.templatePipeFastening)).subscribe((response) => {
      this.templatePipeFastening._id = response;
      this.pipeFasteningsGridData.push(this.templatePipeFastening);
      this.templatePipeFastening = new UniversalConnectorModel(ConnectorType.PipeFastening);
      this.pipeFasteningsGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    });
  }

  searchInGridData() {
    const inputValue = (<HTMLInputElement>document.getElementById('searchInput')).value;
    this.pipeFasteningsGridData = this.pipeFasteningsGridDataOrigin;
    if ( inputValue !== '') {
      this.pipeFasteningsGridData  = this.pipeFasteningsGridData.filter(x => x.name.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
      || (x.articleNumber.toString().indexOf(inputValue) >= 0));
    }
  }

  public prepareCreate() {
    this.templatePipeFastening = new UniversalConnectorModel(ConnectorType.PipeFastening);
    this.createForm();
  }

  private createForm() {
    this.formGroup = new FormGroup({
      name: new FormControl(this.templatePipeFastening.name, Validators.required),
      articleNumber: new FormControl(this.templatePipeFastening.articleNumber),
      description: new FormControl(this.templatePipeFastening.description),
      system: new FormControl(this.templatePipeFastening.system, Validators.required),
      corrosionProtection: new FormControl(this.templatePipeFastening.corrosionProtection, Validators.required),
      pipeFasteningGroupId: new FormControl(this.templatePipeFastening.corrosionProtection, Validators.required),
    });
  }

}