const parseHanis = (title, paths, labels, overlays = [], showDate, displayHandIV) => {
  let config = parseHanisConfig(paths, labels, overlays, showDate);

  if (displayHandIV) {
    return `
    <div id="handiv"></div>

    <script>
      HAniS.setup(\`${config}\`, "handiv", setwin);

      // https://www.ssec.wisc.edu/hanis/examples/ha11c.html
      function setwin() {
        var minW = 900;
        var minH = 750;
        var newW = window.innerWidth - document.getElementById("sidebar").offsetWidth - 50;

        // try to match sidebar height
        var newH = window.visualViewport.height * 0.86 - document.getElementById("data-menu").offsetHeight;
        HAniS.setWindowSize(Math.max(minW,newW), Math.max(minH, newH));
      }

      window.addEventListener(
        "resize",
        () => {
          setwin();
        },
        false
      );
    </script>`;
  } else {
    return ``;
  }

};

const parseHanisConfig = (paths, labels, overlays, showDate) => {
  const hasOverlays = overlays.length > 0;
  let config = "";

  config += parseFileNames(paths);
  config += parseFrameLabels(labels, showDate);

  if (hasOverlays) {
    config += parseOverlays(overlays);
  }

  config += addHanisControls(hasOverlays);

  if (hasOverlays) {
    // console.log(config);
    // console.log(overlays);
  }

  return config;
};

const parseFileNames = (paths) => {
  let config = "filenames = ";

  paths = paths.map((path) => path.replaceAll(":", "."));

  for (var i = 0; i < paths.length; i++) {
    config += paths[i];
    if (i < paths.length - 1) {
      config += ", ";
    }
  }

  config += "\n\n";

  return config;
};

const parseFrameLabels = (labels, showDate) => {
  let config = "frame_labels = ";

  labels = labels.map((label) =>
    showDate
      ? label.toUTC().toFormat("dd/MM/yyyy HH:mm ZZZZ").replaceAll(",", " ")
      : label.toUTC().toFormat("HH:mm ZZZZ").replaceAll(",", " ")
  );

  for (var i = 0; i < labels.length; i++) {
    config += labels[i];
    if (i < labels.length - 1) {
      config += ",";
    }
  }

  config += "\n\n";

  return config;
};

const parseOverlays = (overlays) => {
  let overlayFilenames = "overlay_filenames = ";
  let overlayLabels = "overlay_labels = ";

  for (var i = 0; i < overlays.length; i++) {
    let overlay = overlays[i];
    overlayLabels += overlay.overlay_name;
    overlayFilenames += parseOverlayPaths(overlay.overlay_images);
    if (i < overlays.length - 1) {
      overlayFilenames += ",";
      overlayLabels += ",";
    }
  }

  return overlayFilenames + "\n" + overlayLabels + "\n";
};

const parseOverlayPaths = (overlayPaths) => {
  config = "";
  // static overlay
  if (overlayPaths.length === 1) {
    return (config += `${overlayPaths}`);
  }

  // dynamic overlay
  for (var i = 0; i < overlayPaths.length; i++) {
    config += overlayPaths[i];
    if (i < overlayPaths.length - 1) {
      config += "&";
    }
  }

  return config;
};

const addHanisControls = (hasOverlays) => {
  let config = "controls = startstop, speed, step, looprock, zoom, framelabel";

  if (hasOverlays) {
    config += ", overlay\n";
    config +=
      "overlay_labels_style=font-family:arial;font-size:14px;padding:4px;display:flex;flex-direction:row;align-items:left";
  }

  config += `
controls_style = display:flex;flex-direction:row;align-items:left;
buttons_style = margin:1px;border-radius:4px;
divalign=left;
`;

  return config;
};
