import { THEMES, COMPONENTS } from "admin/models/theme";
import { default as computed } from "ember-addons/ember-computed-decorators";

export default Ember.Component.extend({
  THEMES: THEMES,
  COMPONENTS: COMPONENTS,

  classNames: ["themes-list"],

  hasThemes: Em.computed.gt("themesList.length", 0),
  hasUserThemes: Em.computed.gt("userThemes.length", 0),
  hasInactiveThemes: Em.computed.gt("inactiveThemes.length", 0),

  themesTabActive: Em.computed.equal("currentTab", THEMES),
  componentsTabActive: Em.computed.equal("currentTab", COMPONENTS),

  @computed("themes", "components", "currentTab")
  themesList(themes, components) {
    if (this.get("themesTabActive")) {
      return themes;
    } else {
      return components;
    }
  },

  @computed(
    "themesList",
    "currentTab",
    "themesList.@each.user_selectable",
    "themesList.@each.default"
  )
  inactiveThemes(themes) {
    if (this.get("componentsTabActive")) {
      return [];
    }
    return themes.filter(
      theme => !theme.get("user_selectable") && !theme.get("default")
    );
  },

  @computed(
    "themesList",
    "currentTab",
    "themesList.@each.user_selectable",
    "themesList.@each.default"
  )
  userThemes(themes) {
    if (this.get("componentsTabActive")) {
      return [];
    }
    themes = themes.filter(
      theme => theme.get("user_selectable") || theme.get("default")
    );
    return _.sortBy(themes, t => {
      return [
        !t.get("default"),
        !t.get("user_selectable"),
        t.get("name").toLowerCase()
      ];
    });
  },

  didRender() {
    this._super(...arguments);

    // hide scrollbar
    const $container = this.$(".themes-list-container");
    const containerNode = $container[0];
    if (containerNode) {
      const width = containerNode.offsetWidth - containerNode.clientWidth;
      $container.css("width", `calc(100% + ${width}px)`);
    }
  },

  actions: {
    changeView(newTab) {
      if (newTab !== this.get("currentTab")) {
        this.set("currentTab", newTab);
      }
    },
    navigateToTheme(theme) {
      Em.getOwner(this)
        .lookup("router:main")
        .transitionTo("adminCustomizeThemes.show", theme);
    }
  }
});