const { EleventyHtmlBasePlugin, EleventyI18nPlugin } = require("@11ty/eleventy");
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
const pluginIcons = require('eleventy-plugin-icons');
const yaml = require("js-yaml");
const fs = require('fs');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
  eleventyConfig.addPlugin(eleventyNavigationPlugin);
  eleventyConfig.addPlugin(EleventyI18nPlugin, {
    defaultLanguage: "de",
  });
  eleventyConfig.addPlugin(bundlerPlugin);
  let fontawesomePath = "node_modules/@fortawesome/fontawesome-free/svgs";
  eleventyConfig.addPlugin(pluginIcons, {
    sources: [
      { name: "regular", path: `${fontawesomePath}/regular`, default: true },
      { name: "solid", path: `${fontawesomePath}/solid` },
      { name: "brands", path: `${fontawesomePath}/brands` },
    ],
    icon: {
      shortcode: "rawIcon",
    },
  });

  // override icon shortcode to make the SVGs accessible
  eleventyConfig.addAsyncShortcode("icon", async function(input, attrs) {
    if (!attrs || !("title" in attrs)) {
      return eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, attrs);
    }

    const { title, ...newAttrs } = attrs;
    newAttrs.role = "img";
    const svgStr = await eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, newAttrs);
    const match = svgStr.match(/(<svg.*?>)(.*$)/s);
    return match[1] + "<title>" + title + "</title>" + match[2];
  });

  // process the logo files
  eleventyConfig.addTemplateFormats("logo.svg");
  eleventyConfig.addExtension("logo.svg", {
    outputFileExtension: "svg",

    compile: async (inputContent) => {
      return async (data) => {
        // insert year
        let svg = inputContent.replace("{{ese.year}}", String(data.ese.year).slice(-2));
        // insert color
        svg = svg.replaceAll("{{ese.color}}", data.ese.color);

        // render text to path
        // TODO replace with ESM import once we switch to Eleventy v3
        const Session = (await import('svg-text-to-path')).default;
        let session = new Session(svg, {
          fonts: {
            "Aileron Thin": [{
              wght: 400,
              source: "./submodules/aileron/fonts/Aileron-Thin.ttf",
            }]
          }
        });
        await session.replaceAll();

        return session.getSvgString();
      };
    }
  });

  eleventyConfig.addDataExtension("yaml, yml", yaml.load);

  eleventyConfig.addFilter("pageLang", function(value) {
    return value.filter(item => item.page.lang === this.page.lang)
  });

  // copy aileron font
  eleventyConfig.addPassthroughCopy({'./submodules/aileron/fonts/*.(ttf|woff|woff2)': 'fonts'})
  eleventyConfig.addPassthroughCopy({'./submodules/aileron/aileron.lite.min.css': 'aileron.lite.min.css'})
  // copy static files
  eleventyConfig.addPassthroughCopy('./static')

  // copy german start page to root url
  eleventyConfig.on(
    "eleventy.after",
    async ({ dir, runMode, outputMode }) => {
      if (outputMode === "fs") {
        fs.copyFile(`${dir.output}/de/index.html`, `${dir.output}/index.html`, (err) => {
          if (err) console.log(err);
        });
      }
    }
  );

  const eseData = yaml.load(fs.readFileSync('./content/_data/ese.yaml'));

  return {
    dir: {
      input: "content",
      includes: "../_includes",
    },
    pathPrefix: `/${eseData.year}/`,
  }
};