const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCSS = require("gulp-clean-css");
const sourcemaps = require("gulp-sourcemaps");
const autoprefixer = require("gulp-autoprefixer");
const browserSync = require("browser-sync").create();
const fileInclude = require("gulp-file-include");
const esbuild = require("esbuild");

const paths = {
  styles: {
    watch: "src/scss/**/*.scss",
    entry: ["src/scss/kit.scss", "src/scss/demo.scss"],
    dest: "dist/css"
  },
  scripts: {
    watch: "src/js/**/*.js",
    entry: "src/js/index.js",
    outfile: "dist/js/gnexus-ui-kit.js"
  },
  html: {
    watch: "demo/**/*.html",
    entry: "demo/*.html",
    dest: "dist"
  },
  assets: {
    src: "public/**/*",
    dest: "dist"
  }
};

function styles() {
  return gulp.src(paths.styles.entry)
    .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream());
}

function scripts() {
  return esbuild.build({
    entryPoints: [paths.scripts.entry],
    bundle: true,
    minify: true,
    sourcemap: true,
    outfile: paths.scripts.outfile,
    target: ["es2018"],
    platform: "browser",
    format: "iife",
    globalName: "GNexusUIKit"
  }).then(() => {
    browserSync.reload();
  });
}

function html() {
  return gulp.src(paths.html.entry)
    .pipe(fileInclude({
      prefix: "@@",
      basepath: "@file"
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(browserSync.stream());
}

function assets() {
  return gulp.src(paths.assets.src)
    .pipe(gulp.dest(paths.assets.dest));
}

function watchFiles() {
  gulp.watch(paths.styles.watch, styles);
  gulp.watch(paths.scripts.watch, scripts);
  gulp.watch(paths.html.watch, html);
  gulp.watch(paths.assets.src, gulp.series(assets, reload));
}

function reload(done) {
  browserSync.reload();
  done();
}

function serve(done) {
  browserSync.init({
    server: {
      baseDir: "dist"
    },
    open: false,
    notify: false
  });

  done();
}

const build = gulp.parallel(styles, scripts, html, assets);

exports.styles = styles;
exports.scripts = scripts;
exports.html = html;
exports.assets = assets;
exports.build = build;
exports.serve = gulp.series(build, serve, watchFiles);
exports.default = exports.serve;