import { Component, OnInit, Input } from '@angular/core';
import { MainPageService } from '../../../../main-page/main-page.service';
import { PipeToPiperingsManagmentComponent } from '../pipe-to-piperings-managment/pipe-to-piperings-managment.component';
import { PipeToPiperingsModel } from '../../../../models/settings/pipe-to-piperings.model';
declare var $: any;

@Component({
  selector: 'app-pipe-to-piperings-grid',
  templateUrl: './pipe-to-piperings-grid.component.html',
  styleUrls: ['./pipe-to-piperings-grid.component.scss']
})
export class PipeToPiperingsGridComponent implements OnInit {
  @Input() managmentComponent: PipeToPiperingsManagmentComponent;
  isPipeToPiperingsHidden = true;
  pipeToPieperingssGridData: PipeToPiperingsModel[] = [];
  orientationsArray: string[] = ['All', 'Veritcal', 'Horizontal'];
  selectedPipeToPipering: PipeToPiperingsModel;
  isPipeToPiperingChoosen: boolean = false;
  elementIndex: number;
  headers: string[] = ['Pipe function', 'Pipe material type', 'Orientation', ''];

  constructor(private mainPageService: MainPageService) { }

  public ngOnInit(): void {
    this.loadGridDataFromDb();
    this.mainPageService.deletePipeToPiperingSubject.subscribe((value) => {
      this.pipeToPieperingssGridData = this.pipeToPieperingssGridData.filter(x => x._id !== value);
    });
    this.managmentComponent.stateSubject.subscribe((state) => {
      if (state !== null) {
        Object.assign(this.pipeToPieperingssGridData[this.elementIndex], state);
      }
      this.isPipeToPiperingChoosen = false;
    })
  }

  loadGridDataFromDb() {
    this.mainPageService.loadAllPipeToPiperings().subscribe((response) => {
      this.pipeToPieperingssGridData = response.sort(function (a, b) {
        return (a.name < b.name) ? -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.isPipeToPiperingsHidden = !this.isPipeToPiperingsHidden;
  }

  createNewPipeToPipering() {
    const pipeToPipering = new PipeToPiperingsModel();
    this.mainPageService.addNewPipeToPiperingIntoDb(JSON.stringify(pipeToPipering)).subscribe((response) => {
      pipeToPipering._id = response._id;
      pipeToPipering.id = response.id;
      this.pipeToPieperingssGridData.push(pipeToPipering);
      this.elementIndex = this.pipeToPieperingssGridData.indexOf(pipeToPipering);
      this.managmentComponent.showManagmentPage(pipeToPipering, true);
    });
    this.isPipeToPiperingChoosen = true;
  }

  setChoosenElement(element) {
    this.selectedPipeToPipering = {
      ...element,
    };
    this.elementIndex = this.pipeToPieperingssGridData.indexOf(element);
  };

  editPipeToPipering(element) {
    this.selectedPipeToPipering = {
      ...element,
    };
    this.elementIndex = this.pipeToPieperingssGridData.indexOf(element);
    this.managmentComponent.showManagmentPage(this.selectedPipeToPipering, false);
    this.isPipeToPiperingChoosen = true;
  }

  deletePipeToPipering() {
    this.mainPageService.removePipeToPipering(this.selectedPipeToPipering._id).subscribe((res) => { }, (error: any) => { });
    this.mainPageService.deletePipeToPiperingSubject.next(this.selectedPipeToPipering._id);
  }
}