import path from 'path'
import browserSync from 'browser-sync'
import webpack from 'webpack'
import httpProxyMiddleware from 'http-proxy-middleware'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import config from './webpack.config'
import { sassImport } from './utilities'
import { srcPath, sassImportPath } from './paths'

const bundler = webpack(config)
const middlewares = []

// add webpack stuff
middlewares.push(webpackDevMiddleware(bundler, {
	publicPath: config.output.publicPath,
	stats: {
		colors: true,
		chunks: false,
	},
}))

// add hot reloading
middlewares.push(webpackHotMiddleware(bundler))

// start browsersync
const url = 'http://localhost'
const bs = browserSync.create()
const server = bs.init({
	server: {
		baseDir: `${srcPath}/`,
		middleware: middlewares,
	},
	files: [],
	logLevel: 'silent',
	open: false,
	notify: false,
	injectChanges: false,
	ghostMode: {
		clicks: false,
		forms: false,
		scroll: false,
	},
})

console.log(`${url}:${server.options.get('port')}`)

// sass import
bs.watch(path.join(sassImportPath, '**/!(index|index_sub).scss'), { ignoreInitial: true }, () => {
	sassImport(sassImportPath)
})