// Load all the modules from package.json

var gulp = require("gulp"),
    plumber = require("gulp-plumber"),
    autoprefixer = require("gulp-autoprefixer"),
    watch = require("gulp-watch"),
    jshint = require("gulp-jshint"),
    stylish = require("jshint-stylish"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename"),
    compass = require("compass-importer"),
    notify = require("gulp-notify"),
    include = require("gulp-include"),
    sass = require('gulp-sass')(require('sass')),
    browserSync = require("browser-sync").create(),
    critical = require("critical"),
    fancylog = require( 'fancy-log' ),
    compiler = require( 'webpack' ),
    webpackStream = require( 'webpack-stream' ),
    zip = require("gulp-zip");

var config = {
    nodeDir: "./node_modules",
    scripts: "./js/main.js",
    scriptsDist: "./js/dist"
};

// Default error handler
var onError = function(err) {

    console.log("An error occured:", err.message);
    this.emit("end");
};

// JS to watch
var jsFiles = ["./js/**/*.js", "!./js/dist/*.js"];

// Sass files to watch
var cssFiles = ["./sass/**/*.scss"];

// automatically reloads the page when files changed
var browserSyncWatchFiles = ["./*.min.css", "./js/**/*.min.js", "./**/*.php"];

// see: https://www.browsersync.io/docs/options/
var browserSyncOptions = {
    watchTask: true,
    proxy: "http://localhost/gogy/"
};

// Zip files up
gulp.task("zip", function() {

    return gulp
        .src(
          [
            "*",
            "./css/*",
            "./setup/**/*",
            "./fonts/*",
            "./images/**/*",
            "./inc/**/*",
            "./js/**/*",
            "./languages/*",
            "./sass/**/*",
            "./template-parts/*",
            "./templates/*",
            "!bower_components",
            "!auto_commit.sh",
            "!bitbucket-pipelines.yml",
            "!demo",
            "!yarn.lock",
            "!phpcs.xml.dist",
            "!node_modules"
          ],
          { base: "." }
        )
        .pipe(zip("bastet.zip"))
        .pipe(gulp.dest("."));
});

// Jshint outputs any kind of javascript problems you might have
// Only checks javascript files inside /src directory
gulp.task("jshint", function() {

    return gulp
        .src("./js/src/*.js")
        .pipe(jshint({esnext:true}))
        .pipe(jshint.reporter(stylish))
        .pipe(jshint.reporter("fail"));
});

// Concatenates all files that it finds in the manifest
// and creates two versions: normal and minified.
// It's dependent on the jshint task to succeed.
gulp.task("scripts", function() {

    return (
        gulp
          .src( config.scripts )
          .pipe(
            webpackStream({
                    config: require( './webpack.config.js' )
                },
                compiler, function ( err, stats ) {
                    if ( err ) {
                        fancylog( err )
                    }
                })
          )
          .pipe(rename({ basename: "scripts" }))
          .pipe(gulp.dest( config.scriptsDist ))
          // Normal done, time to create the minified javascript (scripts.min.js)
          // remove the following 3 lines if you don't want it
          .pipe(rename({ suffix: ".min" }))
          .pipe(gulp.dest( config.scriptsDist ))
    );
});

// Sass - Creates a regular and minified .css file in root
gulp.task("sass", function() {

    return gulp
        .src("./sass/**/*.scss")
        .pipe(plumber())
        .pipe(
          sass({
            errLogToConsole: true,
            precision: 8,
            noCache: true,
            compass: true,
            outputStyle: 'expanded',
            importer: compass,
            //imagePath: 'assets/img',
            includePaths: [config.nodeDir + "/bootstrap/scss"]
          }).on("error", sass.logError)
        )
        .pipe(autoprefixer())
        .pipe(gulp.dest("."))
        .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
        .pipe(rename({ suffix: ".min" }))
        .pipe(gulp.dest("."))
});

// Generate & Inline Critical-path CSS
gulp.task("critical", function(cb) {
    critical.generate({
        base: "./",
        src: "http://sp:8888/",
        dest: "css/home.min.css",
        ignore: ["@font-face"],
        dimensions: [
          {
            width: 320,
            height: 480
          },
          {
            width: 768,
            height: 1024
          },
          {
            width: 1280,
            height: 960
          }
        ],
        minify: true
    });
});

// Starts browser-sync task for starting the server.
gulp.task("browser-sync", function() {
    //browserSync.init(browserSyncWatchFiles, browserSyncOptions);
});

// Start the livereload server and watch files for change
gulp.task("watch", function() {
    // don't listen to whole js folder, it'll create an infinite loop
    // run jshint be compiling js code
    gulp.watch(config.scripts, gulp.series( gulp.parallel("jshint")));
    gulp.watch(config.scripts, gulp.series( gulp.parallel("scripts")));
    //gulp.watch( config.scripts, build_js );
    gulp.watch(cssFiles, gulp.parallel("sass"));
    //gulp.watch(cssFiles).on('change', browserSync.reload);

});
gulp.task("build", function() {

})
gulp.task("default", gulp.parallel("watch"));