const Koa = require("koa");
const serve = require("koa-static-server");

const port = 4600;
const app = websockify(new Koa());

app.use(serve({ rootDir: "dist", rootPath: "/" }));
app.listen(port);

const less = require("less");

const renderLess = async (lessFilePath) => {
  let lessFileContent = fs.readFileSync(lessFilePath, { encoding: "utf-8" });
  let lessRenderRes = await less.render(lessFileContent);

  let targetPath = path.join(
    __dirname,
    "../dist",
    lessFilePath.substring("src/".length, lessFilePath.length)
  );
  let targetDir = path.dirname(targetPath);
  let targetName = path.basename(targetPath, ".less") + ".css";
  if (!fs.existsSync(targetDir)) {
    fs.mkdirSync(targetDir, { recursive: true });
  }
  targetPath = path.join(targetDir, targetName);
  fs.writeFileSync(targetPath, lessRenderRes.css, { encoding: "utf-8" });
  return { path: targetPath.replace(path.join(__dirname, "../dist"), "") };
};

const glob = require("glob");
const chokidar = require("chokidar");

const watchAndRenderLess = () => {
  glob("src/**/*.less", {}, function (er, files) {
    files.forEach(renderLess);
  });
  const watcher = chokidar.watch("src/**/*.less");
  watcher.on("all", async (e, filePath, stats) => {
    if (e == "add" || e == "change" || e == "addDir") {
      let result = await renderLess(filePath);
      console.log(`${url}${result.path}`);
    }
  });
};

watchAndRenderLess();

const websockify = require("koa-websocket");

const port = 4600;
const url = `http://localhost:${port}`;
const clients = new Set();

app.ws.use(function (ctx, next) {
  clients.add(ctx.websocket);
  ctx.websocket.onclose = () => {
    clients.delete(ctx.websocket);
  };
  return next(ctx);
});

const watchAndRenderLess = () => {
  // ...
  const watcher = chokidar.watch("src/**/*.less");
  watcher.on("all", async (e, filePath, stats) => {
    if (e == "add" || e == "change" || e == "addDir") {
      // ...
      refresh(result.path);
    }
  });
};

const renderClientJs = () => {
  let content = fs.readFileSync(path.join(__dirname, "client.js"), {
    encoding: "utf-8",
  });
  content = content.replace(/\$\[port\]/g, port);
  fs.writeFileSync(path.join(__dirname, "../dist", "client.js"), content, {
    encoding: "utf-8",
  });
};

const refresh = (filePath) => {
  clients.forEach((client) => {
    let data = { type: "refresh", path: filePath };
    client.send(JSON.stringify(data));
  });
};

renderClientJs();

// client.js
(function () {
  // 此文件用于修改主题样式文件时，热更新样式用的。

  let host = "localhost:$[port]";
  let files = new Map();

  let findTargetCss = () => {
    let links = [...document.querySelectorAll('link[rel="stylesheet"]')];
    for (const link of links) {
      let url = new URL(link.href);
      if (url.host === host) {
        files.set(url.pathname, link);
      }
    }
  };

  findTargetCss();

  let ws = new WebSocket(`ws://${host}/`);
  ws.onmessage = (e) => {
    console.log("message", e);
    let data = JSON.parse(e.data);
    if (data.type == "refresh") {
      if (files.has(data.path)) {
        let node = files.get(data.path);
        let url = new URL(node.href);
        let qs = new URLSearchParams(url.search);
        qs.set("t", new Date().getTime());
        url.search = qs.toString();
        node.href = url.toString();
      }
    }
  };
  ws.onopen = (e) => {
    console.log("open", e);
    ws.send("hello world");
  };
})();