import {src, dest, watch, series, parallel} from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpack from 'webpack-stream';
import browserSync from 'browser-sync';
import critical from 'critical';
import cave from 'cave';
import fs from 'fs';
import vinyl from 'vinyl-named';
import onlyifchanged from 'only-if-changed-webpack-plugin';
import { randomBytes } from 'crypto';
import path from 'path';

const PRODUCTION = yargs.argv.prod;
const SERVER = browserSync.create();

export const serve = (done) => {
    SERVER.init({
        proxy: '',
    });
    done();
};
export const reload = done => {
    SERVER.reload();
    done();
};

export const watchForChanges = () => {
  watch('./assets/src/scss/**/*.scss', series(styles));
  watch('./assets/src/images/**/*.{jpg,jpeg,png,svg,gif}', series(images, reload));
  watch(
      ['./assets/src/**/*', '!./assets/src/{images,js,scss}', '!./assets/src/{images,js,scss}/**/*'],
      series(copy, reload)
  );
  watch('./assets/src/js/**/*.js', series(scripts, reload));
  watch('**/*.php', reload);
};

export const styles = () => {
    return src(["./assets/src/scss/*.scss"])
      .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
      .pipe(
        sass({
          includePaths: ["node_modules/reset-css/sass", 'node_modules/@glidejs/glide/src/assets/sass']
        }).on("error", sass.logError)
      )
      .pipe(gulpif(PRODUCTION, postcss([autoprefixer])))
      .pipe(gulpif(PRODUCTION, cleanCss({ compatibility: "ie8" })))
      .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
      .pipe(dest("./assets/dist/css"))
      .pipe(SERVER.stream());
};

export const clean = () => {
    return del(['./assets/dist']);
};

export const itscritical = (done) => {
    critical.generate({
        inline: false,
        src: '',
        css: './assets/dist/css/site.css',
        dest: './assets/dist/css/site.critical.css',
    }).then((css) => {
        fs.writeFileSync('./assets/dist/css/site.noncritical.css', cave('./assets/dist/css/site.css', {css: css, compress: true}));
    }).then(() => {
        del("./assets/dist/css/site.css");
    });
    done();
}

export const images = () => {
    return src('./assets/src/images/**/*.{jpg,jpeg,png,svg,gif}')
        .pipe(gulpif(PRODUCTION, imagemin()))
        .pipe(dest('./assets/dist/images'));
};

export const copy = () => {
    return src([
        './assets/src/**/*',
        '!./assets/src/{images,js,scss}',
        '!./assets/src/{images,js,scss}/**/*'
    ]).pipe(dest('./assets/dist'));
};

export const scripts = () => {
    return src(["./assets/src/js/site.js", "./assets/src/js/site.admin.js"])
      .pipe(vinyl())
      .pipe(
        webpack(
          {
            module: {
              rules: [
                {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: "babel-loader"
                }
              ]
            },
            mode: PRODUCTION ? "production" : "development",
            devtool: !PRODUCTION ? "inline-source-map" : false,
            externals: {
              jquery: "jQuery"
            },
            plugins: [
              new onlyifchanged({
                cacheDirectory: './assets/cache/tmp',
                cacheIdentifier: './assets/cache/tmp', // all variable opts/environment should be used in cache key
            })]
          }
        )
      )
      .pipe(dest("./assets/dist/js"));
};

export const dev = series(
    clean,
    parallel(styles, images, copy, scripts),
    serve,
    watchForChanges
);

export const build = series(clean, parallel(styles, images, copy, scripts), itscritical);
export default dev;