import { autoinject, bindingMode, customElement, bindable } from 'aurelia-framework';

@autoinject
@customElement("ui-tag-list-check")
export class UITagListCheck {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) model: UITagListCheckModel;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) config: UITagListCheckConfig;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) isEditable: boolean = true;

  public showLabel = true;
  protected toggleTag(tag: UITagListCheckTag): void {
    if (this.isEditable) {
      if (tag) tag.selected = !tag.selected;
      this.model = { ...this.model };
    }
  }

  protected toggleModel(model: UITagListCheckModel): void {
    if (this.isEditable && model?.tags?.length > 0) {
      model.selected = !model.selected;
      model.tags.forEach(tag => {
        tag.selected = model.selected;
      });
      this.model = { ...model };
    }
  }

  attached() {
    this.initConfig();
  }

  modelChanged() {
    if (this.model == null || this.model.label == null || this.model.label.length == 0) {
      this.showLabel = false;
    }
    else {
      this.showLabel = true;
    }
  }

  private initConfig(): void {
    if (this.config == null) {
      this.config = {};
    }
    if (this.config.onBackgroundColor == null) {
      this.config.onBackgroundColor = 'red';
    }
    if (this.config.onTextColor == null) {
      this.config.onTextColor = 'white';
    }
    if (this.config.offBackgroundColor == null) {
      this.config.offBackgroundColor = 'green';
    }
    if (this.config.offTextColor == null) {
      this.config.offTextColor = 'white';
    }
    if (this.config.size == null) {
      this.config.size = 'md';
    }
  }
}

export class UITagListCheckConfig {
  onBackgroundColor?: string;
  onTextColor?: string;
  offBackgroundColor?: string;
  offTextColor?: string;
  size?: 'nm' | 'md' | 'lg';
}

export class UITagListCheckModel {
  id?: string | number;
  label: string;
  tags: Array<UITagListCheckTag>;
  selected?: boolean;
}

export class UITagListCheckTag {
  id?: string | number;
  label: string;
  icon?: string;
  selected?: boolean;
}