const {task, 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 getCss = async (mode = 'develop') => {

  if (mode == 'build') {
    return src('src/sass/**/*.sass', {ignore: 'src/sass/parts/**'})
      .pipe(sass())
      .pipe(cleanCSS({compatibility: 'ie8'}))
      .pipe(autoprefixer())
      .pipe(dest('assets/css'))
  }

  return src('src/sass/**/*.sass')
    // .pipe(sourcemaps.init())
    // .pipe(newer('*'))
    .pipe(sass())
    .pipe(autoprefixer())
    // .pipe(sourcemaps.write('./maps'))
    .pipe(dest('assets/css'))
    // .pipe(browser.stream({match: '**/*.css'}));
    .pipe(browser.reload({stream: true}));
}

function getJs() {
  return src('src/js/**/*.js')
  .pipe(sourcemaps.init())
  .pipe(uglify())
  .pipe(sourcemaps.write('./'))
  .pipe(dest('./assets/js'))
}

function check() {
  watch('src/sass/**/*.sass', getCss.bind(null, 'develop')).on('change', browser.reload.bind(null, {stream: true}));
  watch('src/js/**/*.js', getJs).on('change', browser.reload);
  watch('src/img/*', compressImages).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('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('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('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.start = parallel(check, startServer);