import { extend as dayjsExtend, locale as dayjsLocale } from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import 'dayjs/locale/nl';
import 'object-fit-cover';
import Vue, { VueConstructor } from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import draggable from 'vuedraggable';
import assets from './assets/assets.vue';
import CrudFactory from './crud/crud-factory';
import { doc } from './docs/doc';
import docs from './docs/docs.vue';
import ipWhitelistFactory from './ip-whitelist/ip-whitelist-factory';
import pageCrudColumnActions from './pages/crud/page-crud-column-actions.vue';
import pageCrudColumnPageType from './pages/crud/page-crud-column-page-type.vue';
import pageCrudColumnPublished from './pages/crud/page-crud-column-published.vue';
import pageCrudColumnTitle from './pages/crud/page-crud-column-title.vue';
import pages from './pages/pages.vue';
import rootComponent from './root-component.vue';
import './resources/icomoon/style.css';
import redirectActive from './schema/fields/redirect-active.vue';
import redirectTestButton from './schema/fields/redirect-test-button.vue';
import schemaComponentPart from './schema/schema-component-part.vue';
import schemaField from './schema/schema-field.vue';
import dropdownMenu from './shared/dropdown-menu.vue';
import menuItem from './shared/menu-item.vue';
import selectDropdownMenu from './shared/select-dropdown-menu.vue';
import store from './stores';
import './style.scss';
import keepLoginAlive from './tools/keep-login-alive';
import { getCmsSettings, initializeCmsSettings } from './tools/settings';
import './tools/vue-delete.scss';
import VueScrollStop from './tools/vue-scroll-stop';
import './tools/vuedraggable.scss';
import type { CmsSettings, NavigationItem } from './types/settings';

declare global {
  interface Window {
    app: Vue;
    serverSideCmsSettings: CmsSettings;
  }
}

dayjsExtend(localizedFormat);
dayjsLocale('nl');

// @ts-expect-error
Vue.config.devtools = import.meta.env.MODE === 'development';

Vue.use(VueRouter);
Vue.use(VueScrollStop);

Vue.component('draggable', draggable);

Vue.component('dropdown-menu', dropdownMenu);
Vue.component('select-dropdown-menu', selectDropdownMenu);
Vue.component('menu-item', menuItem);
Vue.component('schema-component-part', schemaComponentPart);
Vue.component('schema-field', schemaField);
Vue.component('redirect-test-button', redirectTestButton);
Vue.component('redirect-active', redirectActive);

Vue.component('page-crud-column-actions', pageCrudColumnActions);
Vue.component('page-crud-column-page-type', pageCrudColumnPageType);
Vue.component('page-crud-column-published', pageCrudColumnPublished);
Vue.component('page-crud-column-title', pageCrudColumnTitle);

// create stores for cmsItems that don't have a menu item
CrudFactory.generate('entityType');

const routes: RouteConfig[] = [];
const systemFactories: { [key: string]: RouteConfig } = {
  '/redirects': CrudFactory.generate('redirect', ['description', 'isPermanent', 'from', 'toComposedUrl'], undefined, {
    'Redirect is actief': 'redirect-active',
    Testen: 'redirect-test-button'
  }),
  '/roles': CrudFactory.generate('role', ['name', 'description']),
  '/cmsuser': CrudFactory.generate('cmsUser', ['name', 'email', 'isSuperUser', 'created', 'lastActivity']),
  '/ipwhitelist': ipWhitelistFactory
};

const routeComponent = doc(
  (path: string, component: any, props?: Object) => {
    const routeConfig: RouteConfig = {
      path,
      component,
      children: component.children,
      props
    };

    routes.push(routeConfig);
  },
  `Koppel het component aan het pad <code>path</code> incl. de <code>children</code> (subroutes) van het component. Gebruik eigen componenten of
    gebruik één van de functies uit crud-factory.js.`
);

function enrichWithSystemFactories(items: NavigationItem[]) {
  items.forEach((item) => {
    if (!item.factory && systemFactories[item.href]) {
      item.factory = systemFactories[item.href];
    }

    if (item.items) {
      enrichWithSystemFactories(item.items);
    }
  });
}

function createRouteComponents(items: NavigationItem[]) {
  items.forEach((item) => {
    if (item.factory) {
      routeComponent(item.href, item.factory);
    }

    if (item.items) {
      createRouteComponents(item.items);
    }
  });
}

export const customComponent = doc((name: string, component: VueConstructor) => {
  Vue.component(name, component);
}, `Creëer een custom Vue component.`);

export const runCms = doc(() => {
  routeComponent('/assets', assets);
  routeComponent('/pages', pages);
  routeComponent('/cms-docs', docs);
  routeComponent('/cms-tags', CrudFactory.generate('cmsTag', ['title']));

  const navigationItems = getCmsSettings().navigation.items || [];
  enrichWithSystemFactories(navigationItems);
  createRouteComponents(navigationItems);

  // add start route
  routes.push({ path: '/', redirect: getCmsSettings().navigation.startRoute ? getCmsSettings().navigation.startRoute : '/pages' });

  const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes
  });

  window.app = new Vue({
    render: (h) => h(rootComponent),
    router,
    store,
    components: {
      rootComponent
    }
  }).$mount('#cms-app');

  keepLoginAlive.start();
  store.initialize();
}, `Start het CMS.`);

export const runCmsOnLoad = doc(
  (settings: CmsSettings) => {
    const serverSideCmsSettings = window.serverSideCmsSettings || {};
    const mergedSettings = { ...settings, ...serverSideCmsSettings };

    // merge navigation brand items client/serverside into one array
    if (serverSideCmsSettings.navigationBrandItems) {
      mergedSettings.navigation.brand = mergedSettings.navigation.brand || { label: 'Cms' };
      mergedSettings.navigation.brand.items = mergedSettings.navigation.brand.items || [];
      mergedSettings.navigation.brand.items = [...mergedSettings.navigation.brand.items, ...serverSideCmsSettings.navigationBrandItems];
    }

    initializeCmsSettings(mergedSettings);

    document.addEventListener('DOMContentLoaded', () => {
      runCms();
    });
  },
  `Start <code>runCms</code> op het <code>DOMContentLoaded</code> event. Hiermee kan je <code>@q42/q-cms-components</code>
    importeren in een script die in de <code>&lt;head></code> staat.`
);

export { createFilterLink } from './shared/listing-filter-link';