import { Component } from '@angular/core';
import {
  CdkDragDrop,
  CdkDropList,
  CdkDrag,
  moveItemInArray,
} from '@angular/cdk/drag-drop';
import { DataService } from 'src/services/data/data.service';
import { Ability } from 'src/interfaces/ability';
import { NgxSmartModalService } from 'ngx-smart-modal';

@Component({
  selector: 'proficiencies-table',
  templateUrl: './proficiencies-table.component.html',
  styleUrls: ['./proficiencies-table.component.scss'],
})
export class ProficienciesTableComponent {
  public constructor(
    public dataAccessor: DataService,
    public ngxSmartModalService: NgxSmartModalService
  ) {
    this.proficiencies = this.dataAccessor.proficiencies;
  }

  public proficiencies!: any;

  public ngOnInit(): void {
    // this.proficiencies = this.dataAccessor.getProficiencies();
  }

  public dropTools(event: CdkDragDrop<string[]>): void {
    moveItemInArray(
      this.proficiencies.tools,
      event.previousIndex,
      event.currentIndex
    );
    this.updateDatabase();
  }

  public dropLanguages(event: CdkDragDrop<string[]>): void {
    moveItemInArray(
      this.proficiencies.languages,
      event.previousIndex,
      event.currentIndex
    );
    this.updateDatabase();
  }

  public toggleAcordion(event: any): void {
    if (event.target.classList.contains('accordion')) {
      event.target.classList.toggle('active');
      var panel = event.target.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = '100svh'; //Hier ansetzen um es später scrollable zu machen
      }
    }
  }

  public modifyToolsAndLanguages(): void {
    this.ngxSmartModalService.setModalData(
      this.proficiencies,
      'toolsAndLanguagesModal'
    );
    this.ngxSmartModalService.getModal('toolsAndLanguagesModal').open();
  }

  public updateDatabase(): void {
    this.dataAccessor.proficiencies = this.proficiencies;
  }

  public updateProficiencies(data: any): void {
    this.proficiencies = data;
    this.ngxSmartModalService.getModal('toolsAndLanguagesModal').close();
    this.updateDatabase();
  }
}