import Component from "@ember/component";
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import { alias, equal, or } from "@ember/object/computed";
import I18n from "I18n";

import wizardSchema, {
  requiringAdditionalSubscription,
  subscriptionLevel,
} from "discourse/plugins/discourse-custom-wizard/discourse/lib/wizard-schema";

export default Component.extend({
  tagName: "tr",
  topicSerializers: ["topic_view", "topic_list_item"],
  postSerializers: ["post"],
  groupSerializers: ["basic_group"],
  categorySerializers: ["basic_category"],
  showInputs: or("field.new", "field.edit"),
  classNames: ["custom-field-input"],
  loading: or("saving", "destroying"),
  destroyDisabled: alias("loading"),
  closeDisabled: alias("loading"),
  isExternal: equal("field.id", "external"),

  didInsertElement() {
    this.set("originalField", JSON.parse(JSON.stringify(this.field)));
  },

  // @discourseComputed("field.klass")
  // serializerContent(klass) {
  //   const serializers = this.get(`${klass}Serializers`);

  //   if (serializers) {
  //     return generateContent(serializers, "serializers", this.subscribed);
  //   } else {
  //     return [];
  //   }
  // },

  @discourseComputed("subscription")
  customFieldTypes(subscription) {
    let unsubscribedCustomFields = requiringAdditionalSubscription(
      subscription, "custom_fields", "types"
    );
    return wizardSchema.custom_field.types.reduce((result, type) => {
      let disabled = unsubscribedCustomFields.includes(type);
      result.push({
        id: type,
        name: I18n.t(`admin.wizard.custom_field.type.${type}`),
        subscription: subscriptionLevel(type, "custom_fields", "types"),
        disabled,
      });
      return result;
    }, []);
  },

  @discourseComputed("subscription")
  customFieldKlasses(subscription) {
    let unsubscribedCustomFields = requiringAdditionalSubscription(
      subscription, "custom_fields", "klasses"
    );
    return wizardSchema.custom_field.klasses.reduce((result, klass) => {
      let disabled = unsubscribedCustomFields.includes(klass);
      result.push({
        id: klass,
        name: I18n.t(`admin.wizard.custom_field.klass.${klass}`),
        subscription: subscriptionLevel(klass, "custom_fields", "klasses"),
        disabled,
      });
      return result;
    }, []);
  },

  @observes("field.klass")
  clearSerializersWhenClassChanges() {
    this.set("field.serializers", null);
  },

  compareArrays(array1, array2) {
    return (
      array1.length === array2.length &&
      array1.every((value, index) => {
        return value === array2[index];
      })
    );
  },

  @discourseComputed(
    "saving",
    "isExternal",
    "field.name",
    "field.klass",
    "field.type",
    "field.serializers"
  )
  saveDisabled(saving, isExternal) {
    if (saving || isExternal) {
      return true;
    }

    const originalField = this.originalField;
    if (!originalField) {
      return false;
    }

    return ["name", "klass", "type", "serializers"].every((attr) => {
      let current = this.get(attr);
      let original = originalField[attr];

      if (!current) {
        return false;
      }

      if (attr === "serializers") {
        return this.compareArrays(current, original);
      } else {
        return current === original;
      }
    });
  },

  actions: {
    edit() {
      this.set("field.edit", true);
    },

    close() {
      if (this.field.edit) {
        this.set("field.edit", false);
      }
    },

    destroy() {
      this.set("destroying", true);
      this.removeField(this.field);
    },

    save() {
      this.set("saving", true);

      const field = this.field;

      let data = {
        id: field.id,
        klass: field.klass,
        type: field.type,
        serializers: field.serializers,
        name: field.name,
      };

      this.saveField(data).then((result) => {
        this.set("saving", false);
        if (result.success) {
          this.set("field.edit", false);
        } else {
          this.set("saveIcon", "times");
        }
        setTimeout(() => this.set("saveIcon", null), 10000);
      });
    },
  },
});