import * as Vue from "vue";

import './style/app.scss';

import StringValue from "./components/value/StringValue.vue";
import DecimalValue from "./components/value/DecimalValue.vue";
import BooleanValue from "./components/value/BooleanValue.vue";
import IntegerValue from "./components/value/IntegerValue.vue";
import TextValue from "./components/value/TextValue.vue";
import PropertyField from "./components/PropertyField.vue";

import NewObjectForm from "./components/NewObjectForm.vue";
import NewRelationForm from "./components/NewRelationForm.vue"

import EditObjectForm from "./components/EditObjectForm.vue";
import EditRelationForm from "./components/EditRelationForm.vue";
import EditPropertyField from "./components/EditPropertyField.vue";
import {qs} from "./utils";

function registerComponents(app) {
  app.component('string-value', StringValue);
  app.component('text-value', StringValue);
  app.component('integer-value', IntegerValue);
  app.component('decimal-value', DecimalValue);
  app.component('boolean-value', BooleanValue);
}

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);
    app.component('new-relation', NewRelationForm);
    app.component('property', PropertyField);
    let instance = app.mount('#new-object-form');

    // ...
    return instance;
  },
  editObjectForm(opts) {
    // Opts: model_id, schema, objects (named objects for relations)
    let app = window.app = Vue.createApp(EditObjectForm, opts);
    registerComponents(app);
    app.component('edit-relation', EditRelationForm);
    app.component('edit-property', EditPropertyField);
    let instance = app.mount('#edit-object-form');

    // ...
    return instance;
  },
  propertyEditForm() {
    // multiple and unique are XORed. This is also enforced server-side
    let multiple = qs('#multiple');
    let unique = qs('#unique');
    let type = qs('#data_type');
    unique.addEventListener('input', function () {
      multiple.checked &= !unique.checked;
    })
    multiple.addEventListener('input', function () {
      unique.checked &= !multiple.checked;
    })

    type.addEventListener('input', function () {
      console.log(type.value);
      toggleOptionalBoxes();
    })
    function toggleOptionalBoxes() {
      qs('#string-options').classList.toggle('hidden', type.value !== 'String');
    }
    toggleOptionalBoxes();
  }
};

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