import * as Vue from "vue";

import './style/app.scss';

import StringValue from "./components/StringValue.vue";
import DecimalValue from "./components/DecimalValue.vue";
import BooleanValue from "./components/BooleanValue.vue";
import IntegerValue from "./components/IntegerValue.vue";
import PropertyField from "./components/PropertyField.vue";
import NewObjectForm from "./components/NewObjectForm.vue";
import NewRelationForm from "./components/NewRelationForm.vue";

function registerComponents(app) {
  app.component('string-value', StringValue);
  app.component('integer-value', IntegerValue);
  app.component('decimal-value', DecimalValue);
  app.component('boolean-value', BooleanValue);
  app.component('property', PropertyField);
  app.component('new-relation', NewRelationForm);
}

window.onLoad = function (callback) {
  document.addEventListener('DOMContentLoaded', callback);
}

window.Yopa = {
  newObjectForm(opts) {
    // Opts: model_id, schema, objects (named objects for relations)
    let app = window.app = Vue.createApp(NewObjectForm, opts);
    registerComponents(app);
    let instance = app.mount('#new-object-form');

    // ...
    return instance;
  }
};

onLoad(() => {
	setTimeout(() => {
		let toasts = document.getElementsByClassName('toast');
		if (toasts.length) {
			toasts[0].style.display = 'none';
		}
	}, 3000)
})