'use strict';

// Directories
const themeDir     = 'public/content/themes/conductive';
const distDir      = themeDir + '/dist';
const resourcesDir = 'resources';
const assetsDir    = resourcesDir + '/assets';
const vendorDir    = 'node_modules';

// Build & Serve
const gulp        = require('gulp'),
      browserSync = require('browser-sync').create(),
      replace     = require('gulp-replace'),
      sourcemaps  = require('gulp-sourcemaps');

// JS
const babel         = require('gulp-babel'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      webpackStream = require('webpack-stream'),
      webpack       = require('webpack'),
      webpackConfig = require('./webpack.config.js');

// CSS & Images
const imagemin     = require('gulp-imagemin'),
      sass         = require('gulp-sass'),
      minifyCss    = require('gulp-minify-css'),
      autoprefixer = require('gulp-autoprefixer'),
      svgmin       = require('gulp-svgmin');

// Debugging
const notify = require("gulp-notify");

// Default environment
let env = 'dev';

/**
 * Gulp tasks
 */
gulp.task('watch', function () {
	gulp.start('browser-sync');

	gulp.watch(assetsDir + '/sass/**/*.scss', ['styles']);
	gulp.watch(assetsDir + '/js/**/*.js', ['js']);
	gulp.watch(assetsDir + '/svg/**/*.svg', ['svgs']);
	gulp.watch(assetsDir + '/images/**/*', ['images']);

	gulp.watch([
		'public/content/themes/**/js/app.min.js',
		resourcesDir + '/views/**/*.php'
	], function () {
		browserSync.reload();
	});
});

/**
 * Setup server and watcher
 */
gulp.task('browser-sync', function () {
	return browserSync.init({
		proxy    : 'loc.conductivemarketing.com',
		ghostMode: true,
		open     : false,
		notify   : false
	});
});

/**
 * Compile ES2015 to JS ES5
 */
gulp.task('js', function () {

	return gulp.src([
			'resources/assets/js/index.js',
		])
		.pipe(webpackStream(webpackConfig, webpack))
		.on('error', function handleError() {
			this.emit('end'); // Recover from errors
		})
		.pipe(gulp.dest(distDir + '/js/'));
});


/**
 * Compile SCSS to CSS
 */
gulp.task('styles', function () {
	return gulp.src([
			assetsDir + '/sass/**/*.scss'
		])
		.pipe(sourcemaps.init())
		.pipe(sass())
		// .on('error', sass.logError)
		.on('error', notify.onError(function (error) {
			return error.message;
		}))
		.pipe(autoprefixer({
			browsers: ['last 3 versions']
		}))
		.pipe(env === 'production' ? minifyCss() : sourcemaps.write())
		.pipe(gulp.dest(distDir + '/css/'))
		.pipe(browserSync.reload({
			stream: true
		}));
});

/**
 * Compress SVGs
 */
gulp.task('svgs', function () {
	return gulp.src(assetsDir + '/svg/**/*.svg')
		.pipe(svgmin())
		.pipe(gulp.dest(distDir + '/svg/'));
});

/**
 * Compress Images
 */
gulp.task('images', function () {
	return gulp.src(assetsDir + '/images/**/*')
		.pipe(imagemin())
		.pipe(gulp.dest(distDir + '/images/'));
});

/**
 * Concat all vendor files
 */
gulp.task('vendor', function () {

	return [
		// css
		gulp.src([
				vendorDir + '/flickity/dist/flickity.css',
				vendorDir + '/flatpickr/dist/flatpickr.css'
			])
			.pipe(sourcemaps.init())
			.pipe(concat('vendor.min.css'))
			.pipe(env === 'production' ? minifyCss() : sourcemaps.write())
			.pipe(gulp.dest(distDir + '/css/'))
	]
});

/**
 * Build for production
 */
gulp.task('build for production', function () {
	env = 'production';

	gulp.run('styles');
	gulp.run('js');
	gulp.run('vendor');
	gulp.run('images');
	gulp.run('svgs');
});