import { Component, OnInit, Input } from '@angular/core';
import { MainPageService } from '../../../main-page.service';
import { ChannelsManagmentComponent } from '../channels-managment/channels-managment.component';
import { ChannelModel } from '../../../../models/parts/channel.model';
import { CrossSectionModel } from '../../../../models/parts/cross-section.model';
import { SystemModel } from '../../../../models/dictionaries/system.model';
import { CorosiveProtectionModel } from '../../../../models/dictionaries/corosive-protection.model';
import { MaterialModel } from '../../../../models/dictionaries/material.model';
import { FormGroup, FormControl, Validators } from '@angular/forms';

declare var $: any;


@Component({
  selector: 'app-channels-grid',
  templateUrl: './channels-grid.component.html',
  styleUrls: ['./channels-grid.component.scss']
})
export class ChannelsGridComponent implements OnInit {
  @Input() channelComponent: ChannelsManagmentComponent;
  isChannelHidden = true;
  channelGridData: ChannelModel[] = [];
  templateChannel = new ChannelModel();
  headers: string[] = ['Article no.', 'Name', 'Description'];
  public selectedRowId;
  public allCrossSectionsArray: CrossSectionModel[] = [];
  public availableCrossSectionsArray: CrossSectionModel[] = [];
  public systemsArray: SystemModel[] = [];
  public corrosionProtectionsArray: CorosiveProtectionModel[] = [];
  public materialsArray: MaterialModel[] = [];
  public formGroup: FormGroup;

  constructor(private mainPageService: MainPageService) { }

  public ngOnInit(): void {
    this.allCrossSectionsArray = [];
    this.loadData();
    // this.mainPageService.mysubject.subscribe((value) => {
    //   this.updateChannelInDb(value);
    // });
    this.mainPageService.deleteChannelSubject.subscribe((value) => {
      this.channelGridData = this.channelGridData.filter(x => x._id !== value);
    });
    this.createForm();
  }

  loadData(): void {
    this.mainPageService.loadAllCrossSections().subscribe((response) => {
      this.allCrossSectionsArray = response;
    });
    this.mainPageService.loadAllSystems().subscribe((response) => {
      this.systemsArray = response;
    });
    this.mainPageService.loadAllCorosionProtections().subscribe((response) => {
      this.corrosionProtectionsArray = response;
    });
    this.mainPageService.loadAllChannels().subscribe((response) => {
      this.channelGridData = response;
    });
    this.mainPageService.loadAllMaterials().subscribe((response) => {
      this.materialsArray = 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.isChannelHidden = !this.isChannelHidden;
  }

  onChannelClick(sender) {
    this.channelComponent.showChannel(sender);
  }

  onRowClick(row, id) {
    this.selectedRowId = id;
    this.channelComponent.showChannel(this.channelGridData[row]);
  }

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

  saveNewChannel() {
    this.mainPageService.addNewChannelIntoDb(JSON.stringify(this.templateChannel)).subscribe((response) => {
      this.templateChannel._id = response;
      this.channelGridData.push(this.templateChannel);
      this.templateChannel = new ChannelModel();
    });
  }

  public prepareCreate() {
    this.templateChannel = new ChannelModel();
    this.createForm();
  }

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

  public filterCrossSections() {
    this.availableCrossSectionsArray = this.allCrossSectionsArray.filter(x => x.system === this.templateChannel.system);
  }
}