// ref https://css-tricks.com/gulp-for-wordpress-initial-setup/
// ref https://css-tricks.com/gulp-for-wordpress-creating-the-tasks/

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 concat from 'gulp-concat';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import svgmin from 'gulp-svgmin';
import svgstores from 'gulp-svgstore';
import del from 'del';
import named from 'vinyl-named';
import browserSync from "browser-sync";
import zip from "gulp-zip";
import path from "path";
import info from "./package.json";
import replace from "gulp-replace";
import wpPot from "gulp-wp-pot";

const PRODUCTION = yargs.argv.prod;

const server = browserSync.create();


// js file paths
const utilJsPath = 'src/js/scripts/'; // util.js path - you may need to update this if including the framework as external node module
const componentsJsPath = 'src/js/components/*.js'; // component js files
const vendorsPath = 'src/js/vendors/*.js';
const scriptsJsPath = 'dist/js'; //folder for final scripts.js/scripts.min.js files

export const serve = done => {
    server.init({
        proxy: "https://blueprint-30082019.stash"
    });
    done();
};
export const reload = done => {
    server.reload();
    done();
};
export const clean = () => del(['dist']);

export const styles = () => {
    return src(['src/scss/bundle.scss', 'src/scss/admin.scss'])
        .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulpif(PRODUCTION, postcss([ autoprefixer ])))
        .pipe(gulpif(PRODUCTION, cleanCss({compatibility:'ie8'})))
        .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
        .pipe(dest('dist/css'))
        .pipe(server.stream());
}

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

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


// JS concat and minify
export const scripts = () => {
    return src([utilJsPath+'/util.js', componentsJsPath, vendorsPath, utilJsPath+'script.js'])
        .pipe(concat('scripts.js'))
        .pipe(dest(scriptsJsPath))
        .pipe(browserSync.reload({
            stream: true
        }))
        .pipe(rename('scripts.min.js'))
        .pipe(gulpif(PRODUCTION, uglify()))
        .pipe(dest(scriptsJsPath))
        .pipe(browserSync.reload({
            stream: true
        }));
}


export const svgstore = () => {
    return src('icons/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(rename({prefix: 'icon-'}))
        .pipe(svgstores({
            inlineSvg: true
        }))
        .pipe(dest("dist/css/svg"));
}


export const compress = () => {
    return src([
        "**/*",
        "!node_modules{,/**}",
        "!bundled{,/**}",
        "!src{,/**}",
        "!.babelrc",
        "!.gitignore",
        "!gulpfile.babel.js",
        "!package.json",
        "!package-lock.json",
    ])
        .pipe(
            gulpif(
                file => file.relative.split(".").pop() !== "zip",
                replace("_stashhouse", info.name)
            )
        )
        .pipe(zip(`${info.name}.zip`))
        .pipe(dest('bundled'));
};

export const pot = () => {
    return src("**/*.php")
        .pipe(
            wpPot({
                domain: "_stashhouse",
                package: info.name
            })
        )
        .pipe(dest(`languages/${info.name}.pot`));
};

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

export const dev = series(clean, parallel(styles, svgstore, images, copy, scripts), serve, watchForChanges);
export const build = series(clean, parallel(styles, svgstore, images, copy, scripts), pot, compress);
export default dev;