const gulp = require("gulp");
const { src, dest, series, parallel } = require("gulp");
const autoprefixer = require("autoprefixer"),
  postcss = require("gulp-postcss"),
  sass = require("gulp-sass"),
  sourcemaps = require("gulp-sourcemaps"),
  del = require("del"),
  webpack = require("webpack-stream"),
  webpackConfig = require("./webpack.config.js"),
  modernizr = require("gulp-modernizr"),
  svgSprite = require("gulp-svg-sprite"),
  rename = require("gulp-rename"),
  imagemin = require("gulp-imagemin"),
  browserSync = require("browser-sync").create();

// JS TASKS
function cleanScripts() {
  return del("./app/temp/scripts/App.js");
}

function modernizrTask() {
  return src(["./app/assets/scss/**/*.scss", "./app/assets/js/**/*.js"])
    .pipe(
      modernizr({
        options: ["setClasses"],
      })
    )
    .pipe(dest("./app/assets/temp"));
}

function scriptsTask() {
  return (
    src("./app/assets/js/App.js")
      .pipe(
        webpack(webpackConfig, null, function (err, stats) {
          if (err) {
            console.log(err);
          }
        })
      )
      // .on('error', function (err) { if(err){ console.log(err.message);} })
      .pipe(dest("./app/temp/scripts"))
      .pipe(browserSync.stream())
  );
}

function endCleanModernizr() {
  return del(["./app/assets/temp"]);
}

// SCSS TASKS
function scssTask() {
  return src("./app/assets/scss/**/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write("."))
    .pipe(dest("app/temp/styles"))
    .pipe(browserSync.stream());
}

// ICONS TASK
var config = {
  mode: {
    css: {
      sprite: "sprite.svg",
      render: {
        css: {
          template: "./gulp/templates/sprite.css",
        },
      },
    },
  },
};

function beginClean() {
  return del(["./app/temp/sprite", "-/app/assets/media/images/sprites"]);
}

function createSprite() {
  return src("./app/assets/media/images/icons/**/*.svg")
    .pipe(svgSprite(config))
    .pipe(dest("./app/temp/sprite/"));
}

function copySpriteGraphic() {
  return src("./app/temp/sprite/css/**/*.svg").pipe(
    dest("./app/assets/media/images/sprites")
  );
}

function copySpriteCSS() {
  return src("./app/temp/sprite/css/*.css")
    .pipe(rename("_sprite.scss"))
    .pipe(dest("./app/assets/scss/modules"));
}

function endClean() {
  return del("./app/temp/sprite");
}

// WATCH TASK
const watch = function () {
  browserSync.init({
    notify: false,
    server: {
      baseDir: "./app",
    },
  });
  gulp
    .watch(
      "./app/assets/scss/**/*.scss",
      { usePolling: true },
      gulp.series(scssTask)
    )
    .on("change", browserSync.reload);
  gulp.watch(
    "./app/assets/js/**/*.js",
    { usePolling: true },
    gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr)
  );
  // gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
  gulp.watch("./app/*.html").on("change", browserSync.reload);
};

// IMAGE TASK
function imagesTask() {
  return src([
    "./app/assets/media/images/**/*",
    "./app/temp/media/images/**/*",
    "!./app/assets/media/images/icons",
    "!./app/assets/media/images/icons/**/*",
  ])
    .pipe(
      imagemin({
        progressive: true,
        interlaced: true,
        multipass: true,
      })
    )
    .pipe(dest("./docs/assets/media/images"));
}

exports.watch = watch;
exports.icons = series(
  beginClean,
  createSprite,
  copySpriteGraphic,
  copySpriteCSS,
  endClean
);
exports.images = imagesTask;