const path = require('path');

const nodeModulesPath = path.resolve(__dirname, 'node_modules');

const WebpackNotifierPlugin = require('webpack-notifier');
const DashboardPlugin       = require('webpack-dashboard/plugin');
const BrowserSyncPlugin     = require('browser-sync-webpack-plugin');

let config = {
	resolve: {
		modules   : [
			"resources/assets/js/",
			"resources/assets/models/",
			"resources/assets/shaders/",
			"resources/assets/scss",
			"resources/assets/views/",
			"node_modules"
		],
		extensions: ['.js', '.json', '.svg', '.njk', '.vert', '.frag']
	},

	externals: {
		'three': 'THREE'
	},

	module: {
		rules: [
			/* Compile es6 to es5 */
			{
				test   : /\.(js)$/,
				exclude: /node_modules/,
				use    : [
					{
						loader: 'babel-loader',
						query : {
							presets: [
								["env", {
									"targets": {
										"chrome"  : 52,
										"browsers": ["last 2 versions", "safari 10"]
									}
								}]
							]
						}
					}
				]
			},
			/* sass files */
			{
				test: /\.scss$/,
				use : [
					{
						loader : "style-loader", // creates style nodes from JS strings
						options: {
							sourceMap: true
						}
					},
					{
						loader : "css-loader", // translates CSS into CommonJS
						options: {
							sourceMap: true
						}
					},
					{
						loader: "resolve-url-loader"
					},
					{
						loader : "sass-loader", // compiles Sass to CSS
						options: {
							sourceMap: true
						}
					}
				]
			},
			/* Compile Nunjucs Templates */
			{
				test: /\.(njk|nunjucks)$/,
				use : [
					{ loader: 'nunjucks-loader' }
				]
			},
			/* SVG */
			{
				test: /\.svg$/,
				use : [
					{ loader: 'svg-inline-loader' }
				]
			},
			/* Shaders */
			{
				test   : /\.(glsl|frag|vert)$/,
				loader : 'raw-loader!glslify-loader',
				exclude: [nodeModulesPath],
			},
			/* move fonts to public folder */
			{
				test   : /\.(woff)$/,
				loader : 'url-loader',
				options: {
					// Limit at 50k. Above that it emits separate files
					limit: 50000,

					// url-loader sets mimetype if it's passed.
					// Without this it derives it from the file extension
					mimetype: 'application/font-woff',

					// Output below fonts directory
					name: path.resolve(__dirname, 'htdocs/content/themes/untold/dist/fonts/[name].[ext]')
				},
			},
		]
	},

	// devServer: {
	// 	proxy: {
	// 		'/': {
	// 			target: {
	// 				host: "loc.untold-digital.com",
	// 				protocol: "http:"
	// 			},
	// 			changeOrigin: true,
	// 			secure: false
	// 		}
	// 	},
	// 	historyApiFallback: true
	// },

	plugins: [
		new WebpackNotifierPlugin({
			// alwaysNotify: true
		}),
		new DashboardPlugin(),
		new BrowserSyncPlugin({
				proxy: 'loc.untold-digital.com',
				open : false,
				files: [
					{
						match: [
							'**/*.php'
						],
						fn   : function (event, file) {
							if (event === "change") {
								const bs = require('browser-sync').get('bs-webpack-plugin');
								bs.reload();
							}
						}
					}
				]
			},
			{
				reload: true
			})
	]
};

let bundleConfig = Object.assign({}, config, {
	name   : "bundle",
	entry  : path.resolve(__dirname, 'resources/assets/js/'),
	output : {
		path    : path.resolve(__dirname, 'htdocs/content/themes/untold/dist'),
		filename: 'bundle.js'
	},
	devtool: 'inline-source-map',
});

let splashConfig = Object.assign({}, config, {
	name  : "splash",
	entry : path.resolve(__dirname, 'resources/assets/js/splash/splash.js'),
	output: {
		path    : path.resolve(__dirname, 'resources/assets/js/splash/'),
		filename: 'splash.min.js'
	},
});

// export all configurations
module.exports = [
	bundleConfig,
	splashConfig
];