import gulp from "gulp";
import path from "path";
import sourcemaps from "gulp-sourcemaps";
import babel from "gulp-babel";
import PluginError from "plugin-error";
import rename from "gulp-rename";
import uglify from "gulp-uglify";
import dartSass from 'sass';
import gulpSass from "gulp-sass";
import {getBlockName} from "../helpers.js";

const sass = gulpSass(dartSass);

export function setupWatcher(viewSync) {

  const watchSCSS = gulp.watch(['blocks/**/*.scss'], {delay: 400});
  watchSCSS.on('change', async function (filepath, stats) {
    const pathArray = filepath.split('/', 3);
    pathArray.shift();
    const block = getBlockName(pathArray.join('/'));

    buildStyleFiles(path.join('blocks', '@' + block.project, block.name), () => {
      viewSync.syncTemplate(block.blockName, 'styleUpdate');
    })
  });

  const watchJS = gulp.watch(['blocks/**/*.js', '!blocks/**/*.min.js'], {delay: 400});
  watchJS.on('change', async function (filepath) {
    const pathArray = filepath.split('/', 3);
    pathArray.shift();
    const block = getBlockName(pathArray.join('/'));

    buildScriptFiles(path.join('blocks', '@' + block.project, block.name), () => {
      viewSync.syncTemplate(block.blockName, 'scriptUpdate');
    })
  });

  const watchHBS = gulp.watch(['blocks/**/*.hbs'], {delay: 400});
  watchHBS.on('change', async function (filepath) {
    const pathArray = filepath.split('/', 3);
    pathArray.shift();
    const block = getBlockName(pathArray.join('/'));

    await viewSync.syncTemplate(block.blockName);
  });

}

export function buildAssetFiles(projectPath) {
  // Register tasks.
  gulp.task('build-script-files', (done) => buildScriptFiles(projectPath, done));
  gulp.task('build-styling-files', (done) => buildStyleFiles(projectPath, done));

  // Run first build.
  return new Promise((resolve) => {
    gulp.series('build-script-files', 'build-styling-files', function () {
      resolve();
    })();
  });
}

function showError(errorMessage) {
  console.log(errorMessage);

  // TODO: Send this message to browser.
  // So the developer can understand there is an error.
}

function buildScriptFiles(projectPath = '', done) {
  const files = getJSBundleFiles(projectPath);
  const stream = gulp.src(files, {base: path.posix.join(projectPath, 'src')})
    .pipe(sourcemaps.init({}))
    .pipe(babel()).on('error', function (error) {
      showError(new PluginError('JavaScript', error).toString());
      done();
    })
    .pipe(gulp.src(path.join(projectPath, 'vendor/*.js')))
    // .pipe(gulp.dest('src/'))
    .pipe(rename({extname: '.min.js'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.posix.join(projectPath, 'src')));

  stream.on('end', done);

  return stream;
}

function getJSBundleFiles(projectPath = '') {
  return [path.posix.join(projectPath, "src/**/*.js"), path.posix.join(projectPath, "src/**/*.mjs"), "!" + path.posix.join(projectPath, "src/**/*.min.js")];
}

function buildStyleFiles(projectPath = '', done) {
  const stream = gulp.src(path.join(projectPath, 'src/**/*.scss'), {base: path.posix.join(projectPath, 'src')})
    .pipe(sourcemaps.init({}))
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', function (error) {
      showError(new PluginError('SCSS', error.messageFormatted).toString());
      // sass.logError(error);
      done();
    }))
    // .pipe(gulp.dest('src/'))
    .pipe(rename({extname: '.min.css'}))
    .pipe(sourcemaps.write('.', {}))
    .pipe(gulp.dest(path.posix.join(projectPath, 'src')));

  stream.on('end', done);

  return stream;
}