import _ from "underscore";
export default function (editor, opt = {}) {
  const tm = editor.TraitManager;
  tm.addType("class_select", {
    events: {
      change: "onChange", // trigger parent onChange method on input change
    },
    createInput({ trait }) {
      var md = this.model;
      var opts = md.get("options") || [];
      var input = document.createElement("select");
      var target = this.target;
      var target_view_el = this.target.view.el;
      for (let i = 0; i < opts.length; i++) {
        let name = opts[i].name;
        let value = opts[i].value;
        if (value == "") {
          value = "GJS_NO_CLASS";
        } // 'GJS_NO_CLASS' represents no class--empty string does not trigger value change
        let option = document.createElement("option");
        option.text = name;
        option.value = value;
        const value_a = value.split(" ");
        //if(target_view_el.classList.contains(value)) {
        if (
          _.intersection(target_view_el.classList, value_a).length ==
          value_a.length
        ) {
          option.setAttribute("selected", "selected");
        }
        input.append(option);
      }
      return input;
    },
    onUpdate({ elInput, component }) {
      const classes = component.getClasses();
      var opts = this.model.get("options") || [];
      for (let i = 0; i < opts.length; i++) {
        let name = opts[i].name;
        let value = opts[i].value;
        if (value && classes.includes(value)) {
          elInput.value = value;
          return;
        }
      }
      elInput.value = "GJS_NO_CLASS";
    },

    onEvent({ elInput, component, event }) {
      var classes = this.model.get("options").map((opt) => opt.value);
      for (let i = 0; i < classes.length; i++) {
        if (classes[i].length > 0) {
          var classes_i_a = classes[i].split(" ");
          for (let j = 0; j < classes_i_a.length; j++) {
            if (classes_i_a[j].length > 0) {
              component.removeClass(classes_i_a[j]);
            }
          }
        }
      }
      const value = this.model.get("value");

      // This removes the empty attribute name from attributes list
      const elAttributes = component.attributes.attributes;
      delete elAttributes[""];

      if (value.length > 0 && value != "GJS_NO_CLASS") {
        const value_a = value.split(" ");
        for (let i = 0; i < value_a.length; i++) {
          component.addClass(value_a[i]);
        }
      }
      component.em.trigger("component:toggled");
    },
  });

  tm.addType("jumbotron_class_select", {
    events: {
      change: "onChange", // trigger parent onChange method on input change
    },
    createInput({ trait }) {
      var md = this.model;
      var opts = md.get("options") || [];
      var input = document.createElement("select");
      var target = this.target;
      var target_view_el = this.target.view.el;
      for (let i = 0; i < opts.length; i++) {
        let name = opts[i].name;
        let value = opts[i].value;

        if (value == "") {
          value = "GJS_NO_CLASS";
        } // 'GJS_NO_CLASS' represents no class--empty string does not trigger value change
        let option = document.createElement("option");
        option.text = name;
        option.value = value;

        const value_a = value.split(" ");

        if (
          _.intersection(target_view_el.classList, value_a).length ==
          value_a.length
        ) {
          option.setAttribute("selected", "selected");
        }
        input.append(option);
      }
      return input;
    },

    onUpdate({ elInput, component }) {
      const classes = component.getClasses();
      var opts = this.model.get("options") || [];
      for (let i = 0; i < opts.length; i++) {
        let name = opts[i].name;
        let value = opts[i].value;
        let counter = i + 1;
        let lastClass = classes[i];

        if (
          value &&
          classes.length === counter &&
          classes.includes(lastClass)
        ) {
          elInput.value = value;
          return;
        }
      }
      elInput.value = "GJS_NO_CLASS";
    },

    onEvent({ elInput, component, event }) {
      var classes = this.model.get("options").map((opt) => opt.value);
      for (let i = 0; i < classes.length; i++) {
        if (classes[i].length > 0) {
          var classes_i_a = classes[i].split(" ");
          for (let j = 0; j < classes_i_a.length; j++) {
            if (classes_i_a[j].length > 0) {
              component.removeClass(classes_i_a[j]);
            }
          }
        }
      }
      const value = this.model.get("value");

      // This removes the empty attribute name from attributes list
      const elAttributes = component.attributes.attributes;
      delete elAttributes[""];

      if (value.length > 0 && value != "GJS_NO_CLASS") {
        const value_a = value.split(" ");
        for (let i = 0; i < value_a.length; i++) {
          component.addClass(value_a[i]);
        }
      }
      component.em.trigger("component:toggled");
    },
  });

  const textTrait = tm.getType("text");
  tm.addType("content", {
    events: {
      keyup: "onChange",
    },

    onValueChange: function () {
      var md = this.model;
      var target = md.target;
      target.set("content", md.get("value"));
    },

    getInputEl: function () {
      if (!this.inputEl) {
        this.inputEl = textTrait.prototype.getInputEl.bind(this)();
        this.inputEl.value = this.target.get("content");
      }
      return this.inputEl;
    },
  });

  tm.addType("button-type", {
    createInput({ trait }) {
      const opts = trait.get("options") || [];
      const input = document.createElement("select");
      for (let i = 0; i < opts.length; i++) {
        let name = opts[i].name;
        let value = opts[i].value;
        let option = document.createElement("option");
        option.text = name;
        option.value = value;
        input.append(option);
      }
      return input;
    },
    onEvent({ elInput, component }) {
      const value = this.model.get("value");
      const name = this.model.get("name");
      const attrs = component.attributes.attributes;
      attrs[name] = value;
      if (value) {
        component.attributes.attributes = attrs;
        const eventTraits = component.getTrait("onclick");
        if (value === "submit" && eventTraits) {
          component.removeTrait("onclick");
          const attr = component.getAttributes();
          delete attr["onclick"];
          component.setAttributes(attr);
        } else if (value !== "submit" && !eventTraits) {
          component.addTrait({
            type: "webconnect-event",
            label: "Event",
            name: "onclick",
          });
        }
      }
    },
    onUpdate({ elInput, component }) {
      const attr = component.getAttributes();
      const name = this.model.get("name");
      const value = attr[name];
      if (value) {
        elInput.value = attr[name];
        const eventTraits = component.getTrait("onclick");
        if (value === "submit" && eventTraits) {
          component.removeTrait("onclick");
          delete attr["onclick"];
          component.setAttributes(attr);
        } else if (value !== "submit" && !eventTraits) {
          component.addTrait({
            type: "webconnect-event",
            label: "Event",
            name: "onclick",
          });
        }
      }
    },
  });
}
