const gulp = require('gulp'),
      useref = require('gulp-useref'),
      gulpif = require('gulp-if'),
      terser = require('gulp-terser'),
      sass = require('gulp-sass')(require('sass')),
      purgecss = require('gulp-purgecss'),
      cleanCSS = require('gulp-clean-css'),
      htmlmin = require('gulp-htmlmin'),
      rename = require("gulp-rename"),
      concat = require("gulp-concat"),
      browserSync = require('browser-sync').create();

function copy(cb) {
  gulp.src('./node_modules/bootstrap/dist/js/bootstrap.bundle.js')
    .pipe(gulp.dest('./js/'));
  gulp.src('./node_modules/bootstrap/dist/js/bootstrap.bundle.js.map')
    .pipe(gulp.dest('./js/'));
  gulp.src('./node_modules/bootstrap-icons/font/fonts/*')
    .pipe(gulp.dest('./css/_font/'));
  gulp.src('./node_modules/jquery/dist/jquery.min.js')
    .pipe(gulp.dest('./js/'));
  gulp.src('./node_modules/fullcalendar/main.js')
    .pipe(rename('fullcalendar.js'))
    .pipe(gulp.dest('./js/', { overwrite:true } ));
  gulp.src('./node_modules/fullcalendar/main.css')
    .pipe(rename('fullcalendar.css'))
    .pipe(gulp.dest('./css/', { overwrite:true } ));
  gulp.src('./node_modules/waypoints/lib/noframework.waypoints.js')
    .pipe(rename('waypoints.js'))
    .pipe(gulp.dest('./js/'));
  gulp.src('./node_modules/waypoints/lib/shortcuts/inview.js')
    .pipe(rename('waypoints-inview.js'))
    .pipe(gulp.dest('./js/'));
  console.log("files 📄 from npm pkgs ");
  cb();
}

function assets(cb) {
  gulp.src('./img/**/*.*')
    .pipe(gulp.dest('./app/img/'));
  gulp.src('./fonts/**/*.*')
    .pipe(gulp.dest('./app/fonts/'));
  console.log("moved assets 🖼️ to app/ ");
  cb();
}

function html(cb) {
  return gulp.src('./app/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments:true
    }))
    .pipe(gulp.dest('./app/index.min.html'));
  console.log("HTMLmin 🗜️for app/ ");
  cb();
}

function build(cb) {
  gulp.src('index.html')
    .pipe(useref())
    .pipe(gulpif('*.js', terser({ output: {comments: false} })))
    .pipe(gulpif('*.css', purgecss({
      content:['./app/index.html'],
      safelist:{
        deep:[/^fc/],
        standard: [/accordian*/]
      },
    })))
    /* Used Regex here to identify the js elements from the calendar and waypoints */
    .pipe(gulpif('*.css', cleanCSS({level: {1: {specialComments: 0}}})))
    .pipe(gulp.dest('./app/'));
  console.log("Code built 🔧 for app/ ");
  cb();
}

function mixin(cb) {
  return gulp.src('./css/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('./css/'))
    .pipe(browserSync.stream());
  console.log("Mixin 🎨");
  cb();
}

function reload(cb) {
  browserSync.reload();
  cb();
}

function run() {
  browserSync.init({
    server: {
      baseDir: "./",
      index: "/index.html"
    }
  });
  gulp.watch('./css/*.scss', mixin);
  gulp.watch('./css/**/*.css').on('change', gulp.series(build,reload));
  gulp.watch('./*.html').on('change', gulp.series(html,build,reload));
  gulp.watch('./js/**/*.js').on('change', gulp.series(build,reload));
}

exports.copy = copy;
exports.assets = assets;
exports.html = html;
exports.build = build;
exports.mixin = mixin;
exports.run = run;