const { src, dest, watch, series, pipe } = require("gulp");
const bs = require("browser-sync").create();
const fs = require("fs");
const path = require("path");
const resumePath = path.join(__dirname, "resume.json");
const templateFile = path.join(__dirname, "theme/template.ejs");
//const sass = require("gulp-sass")(require("sass"));
const sass = require("sass");
const ejs = require('ejs');


function setup(cb) {
  let dir = path.join(__dirname, "dev");
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir);
  }
  cb();
}

function css(cb) {
  // src("./theme/**/*.scss")
  //   .pipe(sass().on("error", sass.logError))
  //   .pipe(dest("./dev"));

  cb();
}

function html(cb) {
  const resume = JSON.parse(fs.readFileSync("./resume.json", "utf-8"));
  let css = sass.compile("./theme/style.scss");
  let devBKG = sass.compile("./theme/devbkg.scss");
  css.tagOpen = "<style>"
  css.tagClose = "</style>"
  css.devBKG = devBKG.css;

  fs.writeFileSync(
    path.join(__dirname, "dev/template.html"),
    ejs.render(fs.readFileSync(templateFile, {encoding: "utf-8"}), {resume: resume, css: css})
  );

  cb();
}

function serve() {
  bs.init({
    server: {
      baseDir: "./dev",
      index: "template.html",
    },
    ui: false,
    open: false,
  });

  watch(["./theme/**/*.ejs", "./resume.json"], html);
  watch(["./theme/**/*.scss"], css);
  bs.watch("./dev/*.html").on("change", bs.reload);
  bs.watch("./dev/*.css").on("change", bs.reload);
}

exports.default = series(setup, css, html, serve);