import { Module } from "vuex";
import { RouteConfig } from "vue-router/types/router";
import { cloneDeep } from "lodash";

import CrudOverview from "../crud/crud-overview.vue";
import CrudEditor from "./crud-editor.vue";

import store from "../stores";
import { actions as crudActions, getters as crudGetters, mutations as crudMutations, state as crudState } from "../stores/modules/crud-store";

import CrudStoreModel, { CrudStoreCustomFieldsModel } from "../stores/types/CrudStoreModel";
import RootState from "../stores/types/RootStateModel";
import CrudEditorEmptyTranslation from './crud-editor-empty-translation.vue';
import { ROUTES } from '../tools/route-utils';

export default class CrudFactory {
  public static generate(module: string, fields: string[], customFields?: CrudStoreCustomFieldsModel): RouteConfig {
    this.registerStoreModule(module, fields, customFields);

    return this.setupRoutes(module);
  }

  public static generateSingleton(module: string) {
    this.registerStoreModule(module);

    return this.setupSingletonRoutes(module);
  }

  private static registerStoreModule(module: string, fields?: string[], customFields?: CrudStoreCustomFieldsModel) {
    crudState.path = module;
    crudState.overview.fields = fields;
    crudState.overview.customFields = customFields;

    store.registerModule(module, cloneDeep({
      namespaced: true,
      state: crudState,
      getters: crudGetters,
      actions: crudActions,
      mutations: crudMutations,
    }) as Module<CrudStoreModel, RootState>);
  }

  private static setupRoutes(module: string): RouteConfig {
    // @ts-ignore This does not work with dynamic registered modules, because Typescript has no idea about the module
    const crudStore = store.state[`${module}`] as CrudStoreModel;

    return {
      name: module,
      // @ts-ignore
      template: '<router-view></router-view>',
      children: [
        {
          path: '',
          name: ROUTES.CRUD_INDEX(module),
          component: CrudOverview,
          props: () => ({
            module,
            crudStore
          }),
        },
        {
          path: 'create',
          name: ROUTES.CRUD_CREATE(module),
          component: CrudEditor,
          props: (route) => ({
            query: route.query,
            module,
            crudStore
          })
        },
        {
          path: 'empty-translation',
          name: ROUTES.CRUD_EMPTY_TRANSLATION(module),
          component: CrudEditorEmptyTranslation,
          props: (route) => ({
            query: route.query,
            module,
            crudStore
          })
        },
        {
          path: ':id',
          name: ROUTES.CRUD_EDITOR(module),
          component: CrudEditor,
          props: (route) => ({
            id: route.params.id,
            module,
            crudStore
          }),
          meta: {
            back: ROUTES.CRUD_INDEX(module)
          }
        },
        {
          path: 'copy',
          name: ROUTES.CRUD_COPY(module),
          component: CrudEditor,
          props: (route) => ({
            crudItem: route.params.item,
            query: route.query,
            module,
            crudStore
          })
        }
      ],
    };
  }

  private static setupSingletonRoutes(module: string): RouteConfig {
    // @ts-ignore This does not work with dynamic registered modules, because Typescript has no idea about the module
    const crudStore = store.state[`${module}`] as CrudStoreModel;

    return {
      name: module,
      // @ts-ignore
      template: '<router-view></router-view>',
      children: [
        {
          path: '',
          name: ROUTES.CRUD_INDEX(module),
          component: CrudEditor,
          props: (route) => ({
            query: route.query,
            singleton: true,
            module,
            crudStore
          }),
        },
        {
          path: 'empty-translation',
          name: ROUTES.CRUD_EMPTY_TRANSLATION(module),
          component: CrudEditorEmptyTranslation,
          props: (route) => ({
            query: route.query,
            module,
            crudStore
          })
        },
        {
          path: '',
          name: ROUTES.CRUD_EDITOR(module),
          redirect: { name: `index-${module}` }
        },
      ]
    }
  }
}