import { Component } from '@angular/core';
import { Trait, Ability } from 'src/interfaces/interfaces';
import { DataService } from 'src/services/data/data.service';
import { SpeciesService } from 'src/services/species/species.service';
import { ModalService } from 'src/services/modal/modal.service';
import { AbilityModalComponent } from '../../journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component';
import { TraitModalComponent } from '../../journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component';

@Component({
  selector: 'species',
  templateUrl: './species.component.html',
  styleUrl: './species.component.scss',
})
export class SpeciesComponent {
  public characterData: any;
  species: any;
  speciesName: string = '';
  public showContent: boolean[] = [];

  public constructor(
    public speciesAccessor: SpeciesService,
    public dataAccessor: DataService,
    public modalAccessor: ModalService,
  ) {
    this.characterData = this.dataAccessor.characterData;
    this.speciesName = this.characterData.race;
    this.species = speciesAccessor.getSpeciesDetails(this.speciesName);
    this.showContent = this.characterData.speciesArray;
    if (this.showContent === undefined) {
      this.showContent = new Array(this.species.content.length).fill(true);
    }
    this.updateDatabase();
  }

  /**
   * Toggles the visibility of the content at the given index.
   * @param index The index of the content to be toggled.
   */
  public toggleContentVisibility(index: number) {
    this.showContent[index] = !this.showContent[index];
    this.updateDatabase();
  }

  /**
   * Updates the database with the new content visibility.
   */
  private updateDatabase() {
    this.characterData.speciesArray = this.showContent;
    this.dataAccessor.characterData = this.characterData;
  }

  /**
   * Checks if it is an ability or a trait. If the key ability is present, it is an ability, otherwise it is a trait.
   * @param feature The feature or trait to be added to the character dashboard.
   */
  public addFeature(feature: any) {
    if (feature.isAbility) {
      this.addAbility(feature);
    } else {
      this.addTrait(feature);
    }
  }

  private addAbility(feature: any) {
    let index = feature.name.indexOf('Optional');
    if (index > -1) {
      feature.name = feature.name.slice(index, 8);
    }
    let ability: Ability = {
      name: feature.name,
      shortDescription: '',
      longDescription: feature.description,
      cost: '',
      charges: 0,
      currentlyUsedCharges: 0,
    };
    this.modalAccessor.openModal(AbilityModalComponent, {
      ability: ability,
      isUpdate: true,
      isAddedFromCharacter: true,
    });
    const resultSubscription = this.modalAccessor.result$.subscribe(
      (result) => {
        if (result.state === 'update' || result.state === 'add') {
          let ability = this.dataAccessor.abilities;
          ability.push(result.data);
          this.dataAccessor.abilities = ability;
        }
        resultSubscription.unsubscribe();
      },
    );
  }

  private addTrait(feature: any) {
    let index = feature.name.indexOf('Optional');
    if (index > -1) {
      feature.name = feature.name.slice(index, 8);
    }
    let trait: Trait = {
      name: feature.name,
      shortDescription: '',
      longDescription: feature.description,
      origin: 'Class',
    };
    this.modalAccessor.openModal(TraitModalComponent, {
      trait: trait,
      isUpdate: true,
      isAddedFromCharacter: true,
    });
    const resultSubscription = this.modalAccessor.result$.subscribe(
      (result) => {
        if (result.state === 'update' || result.state === 'add') {
          let traits = this.dataAccessor.traits;
          traits.push(result.data);
          this.dataAccessor.traits = traits;
        }
        resultSubscription.unsubscribe();
      },
    );
  }
}

// public characterData: any;
//   species: any;
//   speciesName: string = '';
//   public showContent: boolean[] = [];

//   public constructor(
//     public speciesAccessor: SpeciesService,
//     public dataAccessor: DataService,
//     public modalAccessor: ModalService,
//   ) {
//     this.characterData = this.dataAccessor.characterData;
//     this.speciesName = this.characterData.species;
//     this.species = speciesAccessor.getSpeciesDetails(this.speciesName);
//     this.showContent = this.characterData.speciesArray;
//     console.log('speciesName: ', this.speciesName);

//     console.log('species: ', this.species);

//     if (this.showContent === undefined) {
//       this.showContent = new Array(this.species.content.length - 1);
//     }
//     this.updateDatabase();
//   }

//   public updateShowContentArray(index: number) {
//     this.showContent[index] = !this.showContent[index];
//     this.updateDatabase();
//   }

//   private updateDatabase() {
//     console.log('arry: ', this.showContent);

//     this.characterData.speciesArray = this.showContent;
//     this.dataAccessor.characterData = this.characterData;
//   }

//   /**
//    * Checks if it is an ability or a trait. If the key ability is present, it is an ability, otherwise it is a trait.
//    * @param feature The feature or trait to be added to the character dashboard.
//    */
//   public addFeature(feature: any) {
//     if ('ability' in feature) {
//       this.addAbility(feature);
//     } else {
//       this.addTrait(feature);
//     }
//   }
