import {defineCustomElement} from 'vue';
import classes from './style.css?inline';
import carousel from 'vue3-carousel/dist/carousel.css?inline';
import carouselStyle from './carousel.css?inline';
import 'vue3-toastify/dist/index.css';
import EventIndex from './EventIndex.ce.vue';
import EventForm from './EventForm.ce.vue';
import EventDescription from './EventDescription.ce.vue';
import axios from 'axios';

window.axios = axios;
axios.defaults.baseURL = window.document.querySelector('[name="adrema_base_url"]').content;

window.hasKeys = function (object, expected) {
    if (typeof object !== 'object') {
        return false;
    }

    var givenKeys = JSON.stringify(Object.keys(object).sort());
    var expectedKeys = JSON.stringify(expected.sort());
    if (givenKeys !== expectedKeys) {
        console.log('Fields ' + givenKeys + ' dont match ' + expectedKeys);
        return false;
    }

    return true;
};

window.globalFieldRules = function () {
    return ['default', 'nami_type', 'for_members', 'key', 'columns', 'name', 'type'];
};

EventForm.styles = [classes, carousel, carouselStyle];
EventIndex.styles = [classes];
EventDescription.styles = [classes];

customElements.define('event-form', defineCustomElement(EventForm));
customElements.define('event-index', defineCustomElement(EventIndex));
customElements.define('event-description', defineCustomElement(EventDescription));