import 'dotenv/config';
import gulp from 'gulp';
import gulpIf from 'gulp-if';
import * as dartSass from 'sass-embedded';
import gulpSass from 'gulp-sass';
import concat from 'gulp-concat';
import { deleteAsync } from 'del';
import sourcemaps from 'gulp-sourcemaps';
import rollup from '@rollup/stream';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import browserSync from 'browser-sync';

const sass = gulpSass(dartSass);
// console.log(process.env) // uncomment this line to check your environment variables

/** 
 * DEFINE FUNCTIONS FOR GULP
*/
// set mode; create .env file for this and set NODE_ENV to development or production
const IS_DEV = process.env.NODE_ENV === "development";
const copySrc = ['./src/**', '!./src/js/**', './uploads/*.json', '!./src/style/**', '!./src/index.js'];

// delete all files in public folder
function clean() {                      
    // delete everything inside of public, but do not delete the folder itself        
    return deleteAsync(['./public/**', '!./public'], { force: true });
}

// handle scss files
function styles() { 
    // specify source files to process
    return gulp.src(['./src/style/*.scss', '!./src/styles/_*'])
    // concatenate all source files
    .pipe(concat('styles.scss'))
    // change scss into css
    .pipe(sass().on('error', sass.logError))
    // save result to public
    .pipe(gulp.dest('./public'))
    // send to browsersync if development mode
    .pipe(gulpIf(IS_DEV, browserSync.stream()));               
};

// handle js files
function scripts() {
    // init rollup module handler
    return rollup({
        input: './src/index.js',
        output: { format: 'cjs' },
    })
    // define final output file name
    .pipe(source('app.js'))
    // if dev mode, create buffer for sourcemaps (optional)
    .pipe(gulpIf(IS_DEV, buffer()))
    // if dev mode, create sourcemaps (optional)
    .pipe(gulpIf(IS_DEV, sourcemaps.write('.')))
    // write output to public folder
    .pipe(gulp.dest('./public'));
};

// copy files over which need no processing
function copyFiles() {
    // define source files
    return gulp.src(copySrc)
    // write output
    .pipe(gulp.dest('./public'));
};

/** 
 * REGISTER PUBLIC TASKS
 * can be called from npm (package.json) 
*/

// default build task
gulp.task('default', gulp.series(clean, gulp.parallel(styles, scripts, copyFiles)));
// default run task
gulp.task('watch', gulp.series(clean, gulp.parallel(styles, scripts, copyFiles), function() {
    // start browsersync server
    browserSync.init({
        server: "./public" // define what folder browsersync will serve
    });
    // watch and handle scss changes, will inject to browser, no need for reload
    gulp.watch('./src/style/*.scss', styles);
    // watch and handle html and js file changes, will reload browser
    gulp.watch(['./src/*.html', './src/**/*.js'],  gulp.series(clean, gulp.parallel(styles, scripts, copyFiles), function(done) {
        browserSync.reload();
        done(); // need to call this callback to signal async completion; otherwise, this task will never end
    }));
}))