// Globally register all base components for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.

import Vue from 'vue';

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
  // Look for files in the "common" directory
  './common',
  // Search for files in subdirectories.
  true,
  // Only include "index" and "_base-" prefixed .vue files at "common" folder
  /^.*\/(index|_base-[\w-]+)\.vue$/
);

// For each matching file name...
requireComponent.keys().forEach((fileName) => {
  // Get the component config
  const componentConfig = requireComponent(fileName);
  // Get the PascalCase version of the component name
  const componentName = fileName
    // Remove the "./_" from the beginning
    .replace(/^\.\/_?/, '')
    // Remove the file extension from the end
    .replace(/\.\w+$/, '')
    // Remove the "/index" from the end
    .replace(/\/index$/, '')
    // Removes "/" and replaces to "-" for sub-items
    .replace('/', '-')
    // Split up kebabs
    .split('-')
    // Upper case
    .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
    // Concatenated
    .join('');

  // Globally register the component
  Vue.component(componentName, componentConfig.default || componentConfig);
});
