<template>
  <div class="workspace workspace-grid">
    <div>
      <div class="static-element-header">3D View</div>
      <div v-if="hasWebgl" class="static-element">
        <Solution3DView />
      </div>
      <div v-else class="static-element">
        No WebGL context detected. Your browser or device may not support WebGL. You won't be getting any 3D visualizations until you update. What browser are you even running? I was given this '''bug''' to fix in 2022, WebGL is going to be superseeded by WebGPU in near future. I bet you are one of those people who still uses dumb phones and thinks people will drive ICE cars forever.
      </div>
    </div>
    <div>
      <JobDetail />
      <template v-if="getSolution != null">
        <div class="static-element-header">Selected Solution</div>
        <div class="static-element">
          <SolutionView />
        </div>
      </template>
      <div class="static-element-header">All Solutions</div>
      <div class="static-element">
        <SolutionsTable />
      </div>
    </div>
    <Tooltip />
  </div>
</template>

<script>
import Solution3DView from "../components/Solution3dView";
import SolutionsTable from "../components/SolutionsTable";
import SolutionView from "../components/SolutionView";
import Tooltip from "../components/Tooltip";
import { mapActions, mapGetters } from "vuex";
import JobDetail from "../components/JobDetail";
export default {
  components: {
    Solution3DView,
    SolutionsTable,
    SolutionView,
    Tooltip,
    JobDetail,
  },
  methods: {
    ...mapActions(["setToken"]),
    hasWebGL(){
      const canvas = document.createElement("canvas");
      return canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    }
  },
  computed: {
    ...mapGetters(["getSolution"]),
  },
  created() {
    this.setToken({ token: this.$route.params.jobId });
  },
};
</script>

<style>
</style>