import gulp from 'gulp';
// import gulp from 'gulp4';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import cssnano from 'gulp-cssnano';
import autoprefixer from 'gulp-autoprefixer';
import imagemin from 'gulp-imagemin';
import webp from 'gulp-webp';
import svgSprite from 'gulp-svg-sprite';
import webpack from 'webpack';
import webpackStream from 'webpack-stream';
import pug from 'gulp-pug';
import stripDebug from 'gulp-strip-debug';
import gulpIf from 'gulp-if';
import plumber from 'gulp-plumber';
import changed from 'gulp-changed';
import notify from 'gulp-notify';
import del from 'del';
import browserSync from 'browser-sync';
// import nodemon from 'gulp-nodemon';
import combineS from 'stream-combiner2';
import webpackConfig from './webpack.config.js';

const bs = browserSync.create();
const combine = combineS.obj;
const isDevelopment = process.env.NODE_ENV !== 'production';
const buildFolder = 'public/wp-content/themes/innodrive';
const imagesDest = `${buildFolder}/img`;
const imagesQuery = 'src/assets/img/**/*.{jpg,png,svg}';
const imagesWebpQuery = 'src/assets/img/**/*.{jpg,png}';
const assetsQuery = ['src/assets/**', '!src/assets/img'];

const plumberMessage = (title) => ({
  errorHandler: notify.onError((err) => ({
    title,
    message: err.message,
  })),
});

const imageOptimPlugins = [
  imagemin.optipng({
    optimizationLevel: 3
  }),
  imagemin.jpegtran({
    progressive: true
  }),
  imagemin.svgo(),
];

const createWebpImages = () =>
  gulp
    .src(imagesWebpQuery)
    .pipe(plumber(plumberMessage('createWebpImages')))
    .pipe(webp({
      quality: 90
    }))
    .pipe(gulp.dest(imagesDest));

const copyImages = () =>
  gulp
    .src(imagesQuery)
    .pipe(plumber(plumberMessage('copyImages')))
    .pipe(changed(imagesDest))
    .pipe(imagemin(imageOptimPlugins))
    .pipe(gulp.dest(imagesDest));

const createSprite = () =>
  gulp
    .src('src/assets/icons/*.svg')
    .pipe(plumber(plumberMessage('writing sprite')))
    .pipe(svgSprite({
      dest: `${buildFolder}/sprite/`,
      mode: {
        symbol: {
          dest: './',
          inline: true,
          sprite: 'sprite.svg.php'
        }
      }
    }))
    .pipe(gulp.dest(`${buildFolder}/sprite/`));

const compileJS = () =>
  gulp
    .src('src/js/index.js')
    .pipe(plumber(plumberMessage('compileJS')))
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulpIf(!isDevelopment, combine(stripDebug())))
    .pipe(gulp.dest(`${buildFolder}/js/`));

const compileStyles = () =>
  gulp
    .src('src/styles/common.scss')
    .pipe(plumber(plumberMessage('compileStyles')))
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(
      sass({
        includePaths: [
          'tmp/styles',
          'node_modules/normalize-scss',
          'node_modules/choices.js',
          'node_modules/swiper',
        ],
      }),
    )
    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
    .pipe(gulpIf(!isDevelopment, combine(autoprefixer({
      browsers: ['last 4 versions']
    }), cssnano())))
    .pipe(gulp.dest(`${buildFolder}/styles/`));

const copyAssets = () =>
  gulp
    .src(assetsQuery)
    .pipe(plumber(plumberMessage('copyAssets')))
    .pipe(changed(buildFolder))
    .pipe(gulp.dest(buildFolder));

const watch = (done) => {
  gulp.watch(['src/styles/**/*.sass', 'src/styles/**/*.scss', 'tmp/styles/sprite.scss'], compileStyles);
  gulp.watch('src/js/**/*.{js,json}', compileJS);
  gulp.watch(assetsQuery, copyAssets);
  gulp.watch('src/assets/icons/*.svg', createSprite);
  done();
};

const syncBrowser = (done) => {
  bs.init(null, {
    server: {
      baseDir: `./${buildFolder}`,
    },
    open: false,
    notify: false,
  });
  bs.watch(`${buildFolder}/**/*.*`, {
    ignored: '*.map'
  }).on('change', bs.reload);
  done();
};

const buildQueue = [
  compileStyles,
  compileJS,
  createWebpImages,
  copyImages,
  copyAssets,
  createSprite
];

const shortBuildQueue = [
  compileStyles,
  compileJS,
  createWebpImages,
  copyImages,
  copyAssets,
  createSprite
];

gulp.task('fullbuild', gulp.series(...buildQueue));
gulp.task('build', gulp.series(...shortBuildQueue));
gulp.task('dev', gulp.series('build', gulp.parallel(watch, syncBrowser)));