import { Component, OnInit, Input } from '@angular/core';
import { MainPageService } from '../../../main-page.service';
import { ConnectorManagmentComponent } from '../connector-managment/connector-managment.component';
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';


declare var $: any;


@Component({
  selector: 'app-connector-grid',
  templateUrl: './connector-grid.component.html',
  styleUrls: ['./connector-grid.component.scss']
})
export class ConnectorGridComponent implements OnInit {
  @Input() connectorComponent: ConnectorManagmentComponent;
  isConnectorHidden = true;
  connectorGridData: UniversalConnectorModel[] = [];
  connectorGridDataOrigin: UniversalConnectorModel[] = [];
  templateConnector = new UniversalConnectorModel(ConnectorType.Connector);
  public selectedRowId;
  public systemsArray: SystemModel[] = [];
  public corrosionProtectionsArray: CorosiveProtectionModel[] = [];
  public formGroup: FormGroup;
  public connectorTypeArray: any[] = [];

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

  public ngOnInit(): void {
    this.loadData();
    // this.mainPageService.mysubject.subscribe( (value) => {
    //   this.updateConnectorInDb(value);
    //   this.connectorGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    // });
    this.mainPageService.deleteUniversalConnectorSubject.subscribe( (value) => {
      this.connectorGridData = this.connectorGridData.filter(x => x._id !== value);
      this.connectorGridData.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.Connector).subscribe((response) => {
      this.connectorGridData = response;
      this.connectorGridDataOrigin = response;
      this.connectorGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
      this.connectorGridDataOrigin.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 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.isConnectorHidden = !this.isConnectorHidden;
  }

  onConnectorClick(sender) {
    this.connectorComponent.showConnector(sender);
  }

  onRowClick(row, id) {
    this.selectedRowId = id;
    this.connectorComponent.showConnector(this.connectorGridData[row]);
  }

  updateConnectorInDb(id) {
    let dataToSend;
    let preparedData;
    for (const item of this.connectorGridData) {
      if (item._id === id) {
        dataToSend = item;
        break;
      }
    }
    for (const item of this.connectorGridData) {
      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.connectorGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
  }

  saveNewConnector() {
    this.mainPageService.addNewUniversalConnectorIntoDb(JSON.stringify(this.templateConnector)).subscribe((response) => {
      this.templateConnector._id = response;
      this.connectorGridData.push(this.templateConnector);
      this.templateConnector = new UniversalConnectorModel(ConnectorType.Connector);
      this.connectorGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    });
  }

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

  public prepareCreate() {
    this.templateConnector = new UniversalConnectorModel(ConnectorType.Connector);
    this.createForm();
  }

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

}