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

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

  return {
    loading: false,
    data: {
      firstname: "",
      lastname: "",
      username: "",
      email: "",
      group: null,
      function: '',
      oc_groups: [],
    },
    oc_groups: [],
    finished: false,
    submitRequest: null,
    errorFields: [],
    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)" },
    ],
    submit() {
      var _self = this;
      this.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) => {
            Object.keys(errors).forEach((field) => {
              toasted.error(errors[field].join("<br>"));
            });
          });
        }
        if (response.status === 201) {
          _self.finished = true;
        }
      });
    },
  };
}