import svelte from "rollup-plugin-svelte";
import esbuild from "rollup-plugin-esbuild";
import html from "@rollup/plugin-html";
import resolve from "@rollup/plugin-node-resolve";
import image from "@rollup/plugin-image";
import sizes from "rollup-plugin-sizes";
import { visualizer } from "rollup-plugin-visualizer";
import postcss from "rollup-plugin-postcss";
import livereload from "rollup-plugin-livereload";
import sveltePreprocess from "svelte-preprocess";
import commonjs from "@rollup/plugin-commonjs";
import hash from "rollup-plugin-hash";

const VIEWS = ["home", "login", "popup", "user"];

const dev = process.env.NODE_ENV !== "production";

const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => {
   const makeHtmlAttributes = (attributes) => {
      if (!attributes) {
         return "";
      }

      const keys = Object.keys(attributes);
      // eslint-disable-next-line no-param-reassign
      return keys.reduce(
         (result, key) => (result += ` ${key}="${attributes[key]}"`),
         ""
      );
   };

   let bundle_name = "";
   const scripts = (files.js || [])
      .map(({ fileName }) => {
         const attrs = makeHtmlAttributes(attributes.script);
         if (fileName.startsWith("bundle.")) {
            bundle_name = fileName;
         }
         return `<script src="${publicPath}${fileName}"${attrs}></script>`;
      })
      .join("\n");

   const links = (files.css || [])
      .map(({ fileName }) => {
         const attrs = makeHtmlAttributes(attributes.link);
         return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
      })
      .join("\n");

   const metas = meta
      .map((input) => {
         const attrs = makeHtmlAttributes(input);
         return `<meta${attrs}>`;
      })
      .join("\n");

   return `
<!doctype html>
<html${makeHtmlAttributes(attributes.html)}>
  <head>
    ${metas}
    <title>${title}</title>
    <link rel="stylesheet" href="${bundle_name.slice(0, -2)}css"/>
    ${links}
  </head>
  <body>
    ${scripts}
  </body>
</html>`;
};

export default VIEWS.map((view) => ({
   input: `src/pages/${view}/main.ts`,
   output: {
      dir: `build/${view}`,
      entryFileNames: `bundle.[hash].min.js`,
      format: "es",
      sourcemap: true,
      name: view,
   },
   plugins: [
      svelte({
         emitCss: true,
         preprocess: sveltePreprocess({}),
      }),
      commonjs(),
      esbuild({ sourceMap: dev, minify: true }),
      html({
         title: view,
         attributes: {
            html: { lang: "en" },
         },
         meta: [
            {
               name: "viewport",
               content: "width=device-width",
            },
         ],
         template: htmlTemplate,
      }),
      resolve({
         browser: true,
         exportConditions: ["svelte"],
         extensions: [".svelte"],
      }),
      image(),
      sizes(),
      visualizer({
         filename: `build/stats/${view}.html`,
         title: `Rullup bundle for ${view}`,
      }),
      postcss({
         extract: true, // `bundle.css`, //TODO: Check if it should be enabled
         // inject: true,
      }),
      hash({
         dest: "bundle.[hash].min.js",
      }),
      // dev && livereload(),
   ],
}));
