import { autoinject, bindable, customElement } from "aurelia-framework";
import { Config } from '../../config';

@customElement('avatar')
@autoinject
export class Avatar {
  @bindable
  public name: string;

  @bindable
  public rounded: boolean = true;

  @bindable
  public randomBackground: boolean = false;

  @bindable
  public size: number = 32;

  public length = 3;

  public img: string;



  constructor(private config: Config) {

  }
  async bind() {
    let urlStart = `https://ui-avatars.com/api/?name=${this.name}&length=${this.length}&rounded=${this.rounded}&size=${this.size}`;
    let urlEnd = `&color=ffffff&font-size=0.4`
    if (this.randomBackground) {
      this.img = urlStart + `&background=random` + urlEnd;
    }
    else {
      this.img = urlStart + `&background=${this.config.menuConfig.primaryColor.replace('#', '')}` + urlEnd;
    }
  }
}
