const gulp = require('gulp');
const pug = require('gulp-pug');
const sass = require('gulp-sass');
const replace = require('gulp-replace');
const inlineCss = require('gulp-inline-css');
const rename = require('gulp-rename');
const browserSync = require('browser-sync').create();

// browserSync base directory
// this will be the base directory of files for web preview
// since we are building `index.pug` templates (located in src/emails) to `dist` folder.
const baseDir = "./dist";

// compile sass to css
gulp.task('compileSass', function () {
  return gulp
  // import all email .scss files from src/scss folder
  // ** means any sub or deep-sub files or foders
    .src('./sass/**/*.scss')

    // on error, do not break the process
    .pipe(sass().on('error', sass.logError))

    // output to `src/css` folder
    .pipe(gulp.dest('./css'));
});

// build complete HTML email template
// compile sass (compileSass task) before running build
gulp.task('build', gulp.series('compileSass', function () {
  return gulp
  // import all email template (name ending with .template.pug) files from src/emails folder
    .src('emails/**/*.template.pug')

    // replace `.scss` file paths from template with compiled file paths
    .pipe(replace(new RegExp('\/sass\/(.+)\.scss', 'ig'), '/css/$1.css'))

    // compile using Pug
    .pipe(pug())

    // inline CSS
    .pipe(inlineCss())

    // do not generate sub-folders inside dist folder
    .pipe(rename({dirname: ''}))

    // put compiled HTML email templates inside dist folder
    .pipe(gulp.dest('dist'))
}));

// browserSync task to launch preview server
gulp.task('browserSync', function () {
  return browserSync.init({
    reloadDelay: 2000, // reload after 2s, compilation is finished (hopefully)
    port: 3002,
    server: { baseDir: baseDir }
  });
});

// task to reload browserSync
gulp.task('reloadBrowserSync', function () {
  return browserSync.reload();
});

// watch source files for changes
// run `build` task when anything inside `src` folder changes (except .css)
// and reload browserSync
gulp.task('watch', gulp.series('build', 'browserSync', function () {
  return gulp.watch([
    'emails/**/*',
    '!emails/**/*.css',
  ], ['build', 'reloadBrowserSync']);
}));