const {src, dest, parallel, watch} = require('gulp');
const sass =  require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const browser = require('browser-sync');
const cleanCSS = require('gulp-clean-css');
const newer = require('gulp-newer');
const imagemin = require('gulp-imagemin');
const imageminPngquant = require('imagemin-pngquant');
const imageminZopfli = require('imagemin-zopfli');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminGiflossy = require('imagemin-giflossy');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify-es').default;
const del = require('del');
const header = require('gulp-header');
const argv = require('yargs').argv;
const gulpif = require('gulp-if');

const isDevelop = !!argv.develop
const isProd = !!argv.production;

const pathConfig = {
  src: {
    sass: 'src/sass',
    js: 'src/js',
    img: 'src/img',
    fonts: 'src/fonts',
    libs: 'src/libs',
  },
  assets: {
    css: 'assets/css',
    js: 'assets/js',
    img: 'assets/img',
    fonts: 'assets/fonts',
    libs: 'assets/libs',
  },
}

const getCss = async () => {
  return src(`${pathConfig.src.sass}/**/*.sass`)

    .pipe(newer('*'))
    .pipe(gulpif(isDevelop, sourcemaps.init()))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulpif(isProd, cleanCSS({compatibility: 'ie8'})))
    .pipe(gulpif(isProd, autoprefixer()))
    .pipe(gulpif(isDevelop, sourcemaps.write('../sourcemaps/css')))
    .pipe(dest(pathConfig.assets.css))

    .pipe(browser.reload({stream: true}));
}

function getJs() {
  return src(`${pathConfig.src.js}/**/*.js`)

  .pipe(gulpif(isDevelop, sourcemaps.init()))
  .pipe(gulpif(isProd, uglify()))
  .pipe(gulpif(isDevelop, sourcemaps.write('../sourcemaps/js')))

  .pipe(dest(pathConfig.assets.js))
}

function getFonts() {
  return src(`${pathConfig.src.fonts}/**/*.{ttf,woff,woff2,svg,eot}`)

    .pipe(dest(pathConfig.assets.fonts))
}

function check() {
  watch(`${pathConfig.src.sass}/**/*.sass`, getCss).on('change', browser.reload.bind(null, {stream: true}));
  watch(`${pathConfig.src.js}/**/*.js`, getJs).on('change', browser.reload);
  watch(`${pathConfig.src.img}/*`, compressImages).on('change', browser.reload);
  watch(`${pathConfig.src.fonts}/**/*.{ttf,woff,woff2,svg,eot}`, getFonts).on('change', browser.reload);

  watch('**/*.php').on('change', browser.reload);
  watch('templates/*.php').on('add', checkNewTemplates);
}

const build = async () => {
  console.log('\x1b[32m*** START BUILD ***');

  clean(pathConfig.assets.css);
  await getCss('build')

  console.log('\x1b[33m*** END BUILD ***\x1b[37m');
}

function clean(path) {
  return del.sync(path);
}

function startServer(){
  browser.init({
    // server: './',
    proxy: "armanty-quest",
    open: false
  })
}

function compressImages(){
  return src(`${pathConfig.src.img}/*/**`)

  // .pipe(newer('assets/img'))
  .pipe(imagemin([
    imageminGiflossy({
      optimizationLevel: 3,
      optimize: 3,
      lossy: 2
    }),
    imageminPngquant({
        speed: 5,
        quality: [0.6, 0.8]
    }),
    imageminZopfli({
        more: true
    }),
    imageminMozjpeg({
        progressive: true,
        quality: 90
    }),
    imagemin.svgo({
        plugins: [
            { removeViewBox: false },
            { removeUnusedNS: false },
            { removeUselessStrokeAndFill: false },
            { cleanupIDs: false },
            { removeComments: true },
            { removeEmptyAttrs: true },
            { removeEmptyText: true },
            { collapseGroups: true }
        ]
    })
  ]))

  .pipe(dest(pathConfig.assets.img))
}

function checkNewTemplates(event) {
    const fileName = event.slice(10, -4)
    const templateName = fileName[0].toUpperCase() + fileName.slice(1)
    const templateString = `<?php 
  /**
   * Template Name: ${templateName}
   */
?>`
    src(event)
    .pipe(header(templateString))
    .pipe(dest('./'))


    //TODO создавать файл .sass фаайл в src/pages с именем созданного файла в templates

}

exports.minImg = compressImages;
exports.getcss = getCss;
exports.getjs = getJs;
exports.check = check;
exports.build = build;
exports.develop = parallel(check, startServer);