import { Component } from '@angular/core';
import { DataService } from 'src/services/data/data.service';
import { TranslatorService } from 'src/services/translator/translator.service';

@Component({
  selector: 'general',
  templateUrl: './general.component.html',
  styleUrl: './general.component.scss',
})
export class GeneralComponent {
  public data: any;
  public image: any;
  public races: any;
  public classes: any;
  public genders: any;

  public constructor(
    public dataAccessor: DataService,
    private translator: TranslatorService,
  ) {}

  ngOnInit(): void {
    this.data = this.dataAccessor.characterData;
    this.image = this.dataAccessor.image.value;
    this.races = this.translator.races;
    this.classes = this.translator.classes;
    this.genders = this.translator.genders;
  }

  public updateData(): void {
    console.log(this.data);

    this.dataAccessor.characterData = this.data;
  }

  public onImageUpload(event: any): void {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      this.image = reader.result;
      this.dataAccessor.image = { value: reader.result };
    };
    reader.readAsDataURL(file);
  }
}
