<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Achievements & Statistics
      </h1>

      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>

      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>

    <div>
      Here is a view of the activity you can see.
      <ul class="list-disc outside ml-4">
        <li>Each identity and claim has a unique position.</li>
        <li>
          Each will show at their time of appearance relative to all others.
        </li>
        <li>
          Note that the ones on the left and right edges are randomized because
          their data isn't all visible to you.
        </li>
      </ul>
    </div>

    <div class="mt-3">
      <div v-if="worldProperties.startTime">
        <label>Time Range:&nbsp;</label>
        {{ worldProperties.startTime }}
        -
        {{ worldProperties.endTime }}
      </div>
      <div v-if="worldProperties.animationDurationSeconds">
        <label>Animation Time:&nbsp;</label>
        {{ worldProperties.animationDurationSeconds }} seconds
      </div>
    </div>
    <button class="float-right text-blue-600" @click="captureGraphics()">
      Screenshot
    </button>
    <div id="scene-container" class="h-screen"></div>
  </section>
</template>
<script lang="ts">
import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";
import { World } from "../components/World/World.js";
import QuickNav from "../components/QuickNav.vue";
import { NotificationIface } from "../constants/app";

interface RendererSVGType {
  domElement: Element;
}

interface Dictionary<T> {
  [key: string]: T;
}

@Component({ components: { World, QuickNav } })
export default class StatisticsView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $router!: Router;

  world: World;
  worldProperties: Dictionary<number> = {};

  mounted() {
    try {
      const container = document.querySelector("#scene-container");
      const newWorld = new World(container, this);
      newWorld.start();
      this.world = newWorld;
    } catch (err: unknown) {
      const error = err as Error;
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Mounting Error",
          text: error.message,
        },
        5000,
      );
    }
  }

  public captureGraphics() {
    /**
     * This yields an SVG that only shows white and black highlights
     // from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format
     **/
    const rendererSVG = new SVGRenderer();
    rendererSVG.setSize(window.innerWidth, window.innerHeight);
    rendererSVG.render(this.world.scene, this.world.camera);
    ExportToSVG(rendererSVG, "test.svg");
  }

  public setWorldProperty(propertyName: string, propertyValue: number) {
    this.worldProperties[propertyName] = propertyValue;
  }
}

function ExportToSVG(rendererSVG: RendererSVGType, filename: string) {
  const XMLS = new XMLSerializer();
  const svgfile = XMLS.serializeToString(rendererSVG.domElement);
  const svgData = svgfile;
  const preface = '<?xml version="1.0" standalone="no"?>\r\n';
  const svgBlob = new Blob([preface, svgData], {
    type: "image/svg+xml;charset=utf-8",
  });
  const svgUrl = URL.createObjectURL(svgBlob);
  const downloadLink = document.createElement("a");

  downloadLink.href = svgUrl;
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}
</script>
