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 { BasesManagmentComponent } from '../../../../main-page/master-data/bases/bases-managment/bases-managment.component';
import { UniversalConnectorModel, ConnectorType } from '../../../../models/parts/universal-connector.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';

declare var $: any;


@Component({
  selector: 'app-bases-grid',
  templateUrl: './bases-grid.component.html',
  styleUrls: ['./bases-grid.component.scss']
})
export class BasesGridComponent implements OnInit {
  @Input() basesComponent: BasesManagmentComponent;
  isBasesHidden = true;
  basesGridData: UniversalConnectorModel[] = [];
  basesGridDataOrigin: UniversalConnectorModel[] = [];
  templateBase = new UniversalConnectorModel(ConnectorType.Base);
  public selectedRowId;
  public systemsArray: SystemModel[] = [];
  public corrosionProtectionsArray: CorosiveProtectionModel[] = [];
  public formGroup: FormGroup;

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

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

  onbasesClick(sender) {
    this.basesComponent.showBase(sender);
  }

  onRowClick(row, id) {
    this.selectedRowId = id;
    this.basesComponent.showBase(this.basesGridData[row]);
  }

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

  saveNewBase() {
    this.mainPageService.addNewUniversalConnectorIntoDb(JSON.stringify(this.templateBase)).subscribe((response) => {
      this.templateBase._id = response;
      this.basesGridData.push(this.templateBase);
      this.templateBase = new UniversalConnectorModel(ConnectorType.Base);
      this.basesGridData.sort((n1, n2) => Number(n1.articleNumber) > Number(n2.articleNumber) ? 1 : -1);
    });
  }

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

  public prepareCreate() {
    this.templateBase = new UniversalConnectorModel(ConnectorType.Base);
    this.createForm();
  }

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