import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ocLazyLoad from 'oclazyload';

let aboutModule = angular.module('about', [
  uiRouter,
  ocLazyLoad
])

.config(($stateProvider, $compileProvider) => {
  "ngInject";
  $stateProvider
    .state('about', {
      url: '/about',
      views:{
        topbar: {
          template: "<topbar></topbar>"
        },
        sidebar: {
          template: "<sidebar></sidebar>"
        },
        content: {
          template: "<about></about>"
        },
        footer: {
          template:  "<footer></footer>"
        }
      },

      resolve: {
          loadComponent: ($q, $ocLazyLoad) => {
            var deferred = $q.defer();

            // Webpack will define a code-split point for all requires in this callback
            // This will effectively bundle this entire module into a single file
            // that only gets downloaded when this state is transitioned to
            require.ensure([], function(require) {

              // Require our modules
              // This replaces the `import` statements from above
              //let something = require('./about.something');
              // .. any other dependencies
              let component = require('./about.component');

              // Inject all dependencies into our module
              // This replaces adding them to the original angular.module dependency array
              $ocLazyLoad.inject([

              //  something.name
              // .. any other dependencies
              ])

              // Register the component so the template recognizes it
              .then(() => $compileProvider.directive('about', component))
              // Continue the state transition
              .then(deferred.resolve());

            }, 'about'); // Name our bundle so it shows up pretty in the network tab

            return deferred.promise
          }
      }

    });
})

//.component('about', component);

export default aboutModule;