'use strict';

const { src, dest, watch, parallel, series } = require('gulp');
const browserSync       = require('browser-sync').create();
const pug               = require('gulp-pug');
const sass              = require('gulp-sass');
const autoprefixer      = require('gulp-autoprefixer');
const minifyCSS         = require('gulp-csso');
const browserify        = require('browserify');
const source            = require('vinyl-source-stream');
const buffer            = require('vinyl-buffer');
// const uglify            = require('gulp-uglify');
const sourcemaps        = require('gulp-sourcemaps');
const log               = require('gulplog');
const concat            = require('gulp-concat');

// const isInProduction    = (process.env.NODE_ENV) === 'production' || true;

function serve(cb) {
    browserSync.init({
        proxy: 'localhost:8888',
        baseDir: './',
    }, cb);

    watch("resources/scss/", css);
    watch("resources/js/", js);
    // TODO: add watcher for twig templates for autorefreshing page
    // TODO: add watcher to reload page when new files added to public folder
    // watch("templates/").on('change', html);
    // watch("public/").on("change", assets);

    // Watch templates and views directories for changes and reload
    watch('pages/').on('change', browserSync.reload);
    watch('public/').on('change', browserSync.reload);
    // watch('pages/views/').on('change', browserSync.reload);
}




// function assets() {
//     return src('src/public/**/*')
//         .pipe(dest('build/'));
// }

// function html() {
//     return src('src/_templates/views/*.pug')
//         .pipe(pug({ pretty: true }))
//         .on('error', (error) => {
//             console.error(error.toString());
//             this.emit('end');
//         })
//         .pipe(dest('build/'))
//         .pipe(browserSync.stream())
// }

function css() {
    return src('resources/scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(concat('app.min.css'))
        .on('error', log.error)
        .pipe(sourcemaps.write('./'))
        .pipe(minifyCSS())
        .pipe(dest('public/css/'))
        .pipe(browserSync.stream())
}

function js() {
    return browserify({
        basedir: './resources/js/',
        debug: true,
        entries: ['app.js'],
        cache: {},
        packageCache: {}
    })
        .transform('babelify', {
            presets: ['@babel/preset-env'],
            extensions: ['.js']
        })
        .bundle()
        .pipe(source('app.min.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        // TODO: fix minification error on build
        // .pipe(uglify())
        .on('error', log.error)
        .pipe(sourcemaps.write('./'))
        .pipe(dest('public/js/'))
        .pipe(browserSync.stream());
}

// exports.assets      = assets;
// exports.html        = html;
exports.css         = css;
exports.js          = js;
exports.serve       = series(parallel(css, js), serve);
exports.default     = parallel(css, js);
