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 EventIndex from './EventIndex.ce.vue';
import EventForm from './EventForm.ce.vue';
import EventDescription from './EventDescription.ce.vue';
import axios from 'axios';

import 'vue3-toastify/dist/index.css';
import './css/floating.css';

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) {
        var overloadKeys = Object.keys(object).filter((v) => !expected.includes(v));
        var missingKeys = expected.filter((v) => !Object.keys(object).includes(v));

        overloadKeys.length && console.log('keys not expected, but given: ' + overloadKeys);
        missingKeys.length && console.log('keys expected, but missing: ' + missingKeys);
        return false;
    }

    return true;
};

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

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));