// @ts-nocheck
import Vue from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';

export default class GlobalComponentImporter {
  private static registeredComponents: string[] = [];

  private static getComponentCamelCaseName(compName: string): string {
    if (!compName || compName === 'div') {
      // no need to register
      return;
    }
    // Get the PascalCase version of the component name
    const parts = compName.split('/');
    return upperFirst(
      camelCase(
        parts[parts.length - 1]
          // Remove the file extension from the end
          .replace(/\.\w+$/, '')
      )
    );
  }

  private static getComponentTemplateName(
    compName: string,
    relativePath: string
  ): string {
    if (!compName) {
      return '';
    }
    const compCamelCaseName = GlobalComponentImporter.getComponentCamelCaseName(
      compName
    );
    const parts = compName.split('/');
    parts[parts.length - 1] = compCamelCaseName;
    const fileName = parts.join('/');
    return `${relativePath || ''}${fileName}`.replace(/\//gi, '_');
  }

  public static registerComponent(
    compName: string,
    relativePath = 'common/node-generator/components-lib/'
    // extVm: Vue
  ): string {
    // console.log('🐶 [registerComponent]', compName);
    if (!compName || compName === 'div') {
      // no need to register
      return;
    }

    const componentTemplateName = this.getComponentTemplateName(
      compName,
      relativePath
    );
    // console.warn('check is comp registered', this.$options, Vue.$options.components, compCamelCaseName);
    // if( Object.keys(Vue.$options.components).contains(componentTemplateName) ) {
    //   // loaded
    //   return;
    // }
    if (GlobalComponentImporter.registeredComponents[componentTemplateName]) {
      // already registered
      return componentTemplateName;
    }
    GlobalComponentImporter.registeredComponents[
      componentTemplateName
    ] = compName;

    // Get the component config
    const compCamelCaseName = GlobalComponentImporter.getComponentCamelCaseName(
      compName
    );
    const parts = compName.split('/');
    parts[parts.length - 1] = compCamelCaseName;
    const fileName = parts.join('/');
    const componentConfig = () =>
      import('@/components/' + relativePath + fileName + '.vue')
        .then((module) => {
          // console.log(`import OK ${fileName}`, module);
          return module;
        })
        .catch((e) => {
          console.log(`failed import ${fileName}`, e);
        });
    // import(`@/components/${relativePath}${fileName}.vue`);
    // const componentConfig = () => import(/* webpackMode: "lazy-once" */ `@/components/${relativePath}${fileName}.vue`);

    // extVm ? extVm.component(componentTemplateName, componentConfig) : Vue.component(componentTemplateName, componentConfig);
    Vue.component(
      componentTemplateName,
      componentConfig.default || componentConfig
    );

    return componentTemplateName;
  }
}
