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";

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]}"`),
         ""
      );
   };
   const scripts = (files.js || [])
      .map(({ fileName }) => {
         const attrs = makeHtmlAttributes(attributes.script);
         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.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
    ${links}
  </head>
  <body>
    ${scripts}
  </body>
</html>`;
};

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