import computed from 'ember-addons/ember-computed-decorators';
import { escapeExpression } from 'discourse/lib/utilities';

export default Ember.Component.extend({

  classNames: ['group-flair-inputs'],

  @computed
  demoAvatarUrl() {
    return Discourse.getURL('/images/avatar.png');
  },

  @computed('model.flair_url')
  flairPreviewIcon(flairURL) {
    return flairURL && flairURL.substr(0,3) === 'fa-';
  },

  @computed('model.flair_url', 'flairPreviewIcon')
  flairPreviewImage(flairURL, flairPreviewIcon) {
    return flairURL && !flairPreviewIcon;
  },

  @computed('model.flair_url', 'flairPreviewImage', 'model.flairBackgroundHexColor', 'model.flairHexColor')
  flairPreviewStyle(flairURL, flairPreviewImage, flairBackgroundHexColor, flairHexColor) {
    let style = '';

    if (flairPreviewImage) {
      style += `background-image: url(${escapeExpression(flairURL)});`;
    }

    if (flairBackgroundHexColor) {
      style += `background-color: #${flairBackgroundHexColor};`;
    }

    if (flairHexColor) style += `color: #${flairHexColor};`;

    return style;
  },

  @computed('model.flairBackgroundHexColor')
  flairPreviewClasses(flairBackgroundHexColor) {
    if (flairBackgroundHexColor) return 'rounded';
  },

  @computed('flairPreviewImage')
  flairPreviewLabel(flairPreviewImage) {
    const key = flairPreviewImage ? 'image' : 'icon';
    return I18n.t(`groups.flair_preview_${key}`);
  }
});