import { Component, Input } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { ModalService } from 'src/services/modal/modal.service';

@Component({
  selector: 'tools-modal',
  templateUrl: './tools-modal.component.html',
  styleUrls: ['./tools-modal.component.scss'],
})
export class ToolsModalComponent {
  @Input() public proficiencies: any = { tools: [], languages: [] };

  public tools: any;
  public languages: any;

  public constructor(public modalAccessor: ModalService) {}

  ngOnInit(): void {
    this.tools = JSON.parse(JSON.stringify(this.proficiencies.tools));
    this.languages = JSON.parse(JSON.stringify(this.proficiencies.languages));
  }

  public dropTools(event: CdkDragDrop<string[]>): void {
    moveItemInArray(
      this.proficiencies.tools,
      event.previousIndex,
      event.currentIndex,
    );
  }
  public dropLanguages(event: CdkDragDrop<string[]>): void {
    moveItemInArray(
      this.proficiencies.languages,
      event.previousIndex,
      event.currentIndex,
    );
  }
  public addTool(): void {
    this.proficiencies.tools.push('');
  }
  public deleteTool(index: number): void {
    this.proficiencies.tools.splice(index, 1);
  }
  public addLanguage(): void {
    this.proficiencies.languages.push('');
  }
  public deleteLanguage(index: number): void {
    this.proficiencies.languages.splice(index, 1);
  }
  // RESPONSES
  public cancel(): void {
    this.modalAccessor.handleModalClosing('cancel', undefined);
  }
  public update(): void {
    this.modalAccessor.handleModalClosing('update', this.proficiencies);
  }
}
