import scrollToElement from "./scrollToElement.js";

var toastedOptions = {
  position: "bottom-right",
  duration: 3000,
  fitToScreen: false,
  fullWidth: false,
  theme: "material",
};

export default function (toasted) {
  var toasted = new toasted(toastedOptions);

  return {
    data: {
      event_id: null,
      gender: "",
      firstname: "",
      lastname: "",
      birthday: "",
      group: null,
      phone: "",
      email: "",
      agegroup_leader: null,
      food_preferences: [],
      foto: false,
      misc: "",
    },
    loading: false,
    finished: false,
    submitRequest: null,
    errorFields: [],
    active: 0,
    slides: ["Persönliches", "Veranstaltung", "Sonstiges"],
    genders: [
      { id: "Männlich", name: "Männlich" },
      { id: "Weiblich", name: "Weiblich" },
      { id: "Divers", name: "Divers" },
    ],
    groups: [
      { id: "Gallier", name: "Gallier (Wuppertal)" },
      { id: "Gandalf", name: "Gandalf (SG-Mangenberg)" },
      { id: "Gravenrode", name: "Gravenrode (SG-Gräfrath)" },
      { id: "Lennep", name: "Lennep (RS-Lennep)" },
      { id: "Silva", name: "Silva (SG-Wald)" },
      { id: "Sugambrer", name: "Sugambrer (SG-Höhscheid)" },
      { id: "Tenkterer", name: "Tenkterer (SG-Löhdorf)" },
      { id: "von Berg", name: "von Berg (SG-Ohligs)" },
    ],
    agegroupLeaders: [
      { id: "Biber", name: "Biber" },
      { id: "Wölfling", name: "Wölfling" },
      { id: "Jungpfadfinder", name: "Jungpfadfinder" },
      { id: "Pfadfinder", name: "Pfadfinder" },
      { id: "Rover", name: "Rover" },
    ],
    boolean: [
      { id: "Ja", name: "Ja" },
      { id: "Nein", name: "Nein" },
    ],
    foodPreferences: [
      { id: "Fleisch", name: "Ich esse Fleisch" },
      { id: "Vegan", name: "Ich ernähre mich vegan" },
      { id: "Glutenfrei", name: "Ich vertrage kein Gluten" },
      { id: "Laktosefrei", name: "Ich vertrage keine Laktose" },
    ],
    slideTo(e, index) {
      if (e !== null) {
        e.preventDefault();
      }
      if (index < 0 || index > this.slides.length - 1) {
        return;
      }
      this.scrollForm(this.$refs.form);
      this.active = index;
      this.$refs.slider.scrollLeft =
        (this.$refs.slider.scrollWidth / this.slides.length) * index;
      this.$refs.mobileSlider.scrollLeft =
        (this.$refs.mobileSlider.scrollWidth / this.slides.length) * index;
    },
    scrollForm(el) {
      var margin = window.getComputedStyle(el).marginTop.replace("px", "");
      scrollToElement(el, 300, (margin ? margin : 0) * -1);
    },
    submit() {
      var _self = this;
      _self.loading = true;
      var promise = fetch(window.location.href, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-WINTER-REQUEST-HANDLER": this.submitRequest,
          "X-WINTER-REQUEST-PARTIALS": [],
          "X-Requested-With": "XMLHttpRequest",
        },
        body: JSON.stringify(this.data),
      });

      promise.then(function (response) {
        _self.loading = false;
        if (response.status === 422) {
          response.json().then((errors) => {
            _self.scrollToFirstError(errors);
            Object.keys(errors).forEach((field) => {
              toasted.error(errors[field].join("<br>"));
            });
          });
        }
        if (response.status === 201) {
          _self.finished = true;
          _self.scrollForm(_self.$refs.form);
        }
      });
    },
    scrollToFirstError(errors) {
      if (Object.keys(errors).length === 0) {
        return;
      }

      var firstField = Object.keys(errors)[0];
      var field = this.$refs.form.querySelector('[name="' + firstField + '"]');

      if (field === null) {
        return;
      }

      var slideElement = field.closest(".slider-element");
      this.slideTo(
        null,
        Array.from(slideElement.parentNode.children).indexOf(slideElement)
      );
    },
    prevButton: {
      [":class"]() {
        return this.active == 0 ? "opacity-40" : "";
      },
    },
    nextButton: {
      [":class"]() {
        return this.active == this.slides.length - 1 ? "opacity-40" : "";
      },
    },
  };
}