// src/index.ts
#!/usr/bin/env node
import { Command } from "commander";
import { createAction } from "./actions/create";
import { startAction } from "./actions/start";
import { buildAction } from "./actions/build";

const program = new Command();

program
  .name("@my-space/react-dev-kit")
  .description("The React Development Toolkit for MySpace")
  .version("1.0.0");

program.command("create").description("").action(createAction);
program.command("start").description("").action(startAction);
program.command("build").description("").action(buildAction);

program.parse();

// src/core/paths.ts
import fs from "fs";
import path from "path";
import { IExternalConfig, IPaths } from "../types";

export const appDirectory = fs.realpathSync(process.cwd());

export const resolveApp = (relativePath: string) =>
  path.resolve(appDirectory, relativePath);

export const moduleFileExtensions = [".ts", ".tsx", ".js", ".jsx"];

export const getPaths = (config: IExternalConfig): IPaths => {
  const path: IPaths = {
    appPath: resolveApp("."),
    appBuild: resolveApp(config.outputDir),
    appPublic: resolveApp("public"),
    appHtml: resolveApp("public/index.html"),
    appSrc: resolveApp("src"),
    appIndexJs: resolveApp("src/index.tsx"),
    appTsConfig: resolveApp("tsconfig.json"),
    // ...
  };
  return path;
};

const webpackConfig: Webpack.Configuration = {
  //...
  externals: getWebpackExternals(),
};

// src/plugins/app-html-plugin.ts
import { Compiler } from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { IRemoteConfig } from "../types";

export class AppHtmlPlugin {
  private remoteConfig: IRemoteConfig;

  constructor(remoteConfig: IRemoteConfig) {
    this.remoteConfig = remoteConfig;
  }

  apply(compiler: Compiler) {
    compiler.hooks.compilation.tap("AppHtmlPlugin", (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
        "AppHtmlPlugin",
        (data, cb) => {
          const js: string[] = [];
          const css: string[] = [];
          this.remoteConfig.configContent.externals.forEach((item) => {
            if (Array.isArray(item.js) && item.js.length > 0) {
              item.js.forEach((n) => js.push(n));
            }
            if (Array.isArray(item.css) && item.css.length > 0) {
              item.css.forEach((n) => css.push(n));
            }
          });
          data.assets.js = [...js, ...data.assets.js];
          data.assets.css = [...css, ...data.assets.css];
          cb(null, data);
        }
      );
    });
  }
}

// src/core/context.ts
import { Env, IContext, Mode } from "../types";
import { getRemoteConfig } from "./remote-config";
import { getExternalConfig } from "./external-config";
import { getPaths } from "./paths";

export const createContext = async (mode: Mode): Promise<IContext> => {
  const env: Env = {
    NODE_ENV: mode,
    BABEL_ENV: mode,
  };
  for (const key in env) {
    process.env[key] = env[key];
  }
  const remoteConfig = await getRemoteConfig();
  const externalConfig = getExternalConfig(env);
  const paths = getPaths(externalConfig);

  return { mode, env, paths, externalConfig, remoteConfig };
};

// src/core/webpack-config.ts
import Webpack, { DefinePlugin, ProgressPlugin } from "webpack";
import merge from "webpack-merge";
import { IContext } from "../types";
import { moduleFileExtensions } from "./paths";
import { AppHtmlPlugin } from "../plugins/app-html-plugin";

export const getWebpackConfig = ({
  mode,
  env,
  paths,
  externalConfig,
  remoteConfig,
}: IContext) => {
  const isEnvDevelopment = mode === "development";
  const isEnvProduction = mode === "production";

  const webpackConfig: Webpack.Configuration = {
    mode: isEnvDevelopment ? "development" : "production",
    entry: [paths.appIndexJs],
    output: {
      publicPath: externalConfig.publicPath,
      path: paths.appBuild,
      // ...
    },
    devtool: isEnvProduction ? "source-map" : "cheap-module-source-map",
    stats: "errors-warnings",
    resolve: {
      extensions: moduleFileExtensions,
    },
    optimization: {
      // ...
    },
    module: {
      rules: [
        // ...
      ],
    },
    plugins: [
      // ...
      new AppHtmlPlugin(remoteConfig),
      new DefinePlugin({
        "process.env": Object.keys(env).reduce((obj, key) => {
          obj[key] = JSON.stringify(env[key]);
          return obj;
        }),
      }),
      // ...
    ],
    externals: remoteConfig.getWebpackExternals(),
  };
  return merge(webpackConfig, externalConfig.configureWebpack);
};

// src/actions/build.ts
import fs from "fs-extra";
import Webpack from "webpack";
import { createContext } from "../core/context";
import { getWebpackConfig } from "../core/webpack-config";

export const buildAction = async () => {
  const context = await createContext("production");

  const config = getWebpackConfig(context);
  const compiler = Webpack(config);

  fs.emptyDirSync(context.paths.appBuild);
  fs.copySync(context.paths.appPublic, context.paths.appBuild, {
    dereference: true,
    filter: (file) => file !== context.paths.appHtml,
  });
  compiler.run((err, stats) => {
    console.log("-".repeat(100));
    if (stats) {
      console.log(stats.toString());
      console.log("-".repeat(100));
    }
    if (!err) {
      console.log("build success");
      console.log("-".repeat(100));
    }
  });
};

// src/actions/start.ts
export const startAction = async () => {
  const context = await createContext("development");

  const config = getWebpackConfig(context);
  const compiler = Webpack(config);

  const devServerConfig = getWebpackConfigDevServer(context);
  const server = new WebpackDevServer(devServerConfig, compiler);

  server.start();
};

// src/core/dev-server-config.ts
import webpackDevServer from "webpack-dev-server";
import { merge } from "webpack-merge";
import { IContext } from "../types";

export const getWebpackConfigDevServer = (context: IContext) => {
  const defaultConfig: webpackDevServer.Configuration = {
    port: "auto",
    hot: true,
    open: true,
    client: {
      progress: true,
    },
  };
  return merge(defaultConfig, context.externalConfig.devServer);
};

this.webviewPanel.webview.html = await this.getWebViewContent(path);

async getWebViewContent(path: string) {
  let url = 'http://127.0.0.1:1234'
  let html = await rp(url)
  html = html.replace(/(<link.*?href="|<script.(!>)*?src="|<img.*?src=")(.+?)"/g, (m: string, $1: string, $2: string, $3: string) => {
    return $1 + (url + $3) + '"'
  })
  return html.replace('$currentPath', path)
}

// vs code 再加载 html 内容给 webview 前进行替换
html.replace("$currentPath", path);

private read = () => {
  if (vscode.workspace.rootPath == null) {
    throw new Error('请先打开一个工作区，再运行此命令')
  }
  const filePath = path.join(vscode.workspace.rootPath, '.vscode', 'my.code-snippets')
  if (!fs.existsSync(filePath)) {
    const dir = path.join(vscode.workspace.rootPath, '.vscode')
    if (!fs.existsSync(dir)) {
      fs.mkdirSync(dir, { recursive: true })
    }
    fs.writeFileSync(filePath, '{}')
    return {}
  }
  const json = fs.readFileSync(filePath).toString()
  const snippets = JSON.parse(json)
  return snippets
}

function toSnippet(code) {
  const separatedSnippet = code
    .replace(/\\/g, "\\\\")
    .replace(/"/g, '\\"')
    .split("\n");
  const separatedSnippetLength = separatedSnippet.length;

  let snippet = separatedSnippet.map((line, index) => {
    return index === separatedSnippetLength - 1 ? `"${line}"` : `"${line}",`;
  });
  snippet = snippet.join("\n");
  return snippet;
}