<template>
  <main v-if="hasProteins" example-act="intro" class="workspace workspace-grid">
    <div>
      <div class="static-element-header">3D View</div>
      <div class="static-element">
        <Protein3DView />
      </div>

      <div class="static-element-header">Scaffold Loop List</div>
      <div class="static-element">
        <InterestingLoops example-act="view-interesting-loops" />
      </div>
    </div>
    <div>
      <JobDetail />

      <Step step="protein-selection" class="step protein-selection"  example-act="protein-showcase">
        <LoopsSecsRefinment />
      </Step>
      <Step
        example-act="loop-exploration-open"
        step="loop-exploration"
        class="step loop-selection"
        v-if="loopExplorationAvailable"
      >
        <Juxtaposition />
        <div id="loops" class="row columize" example-act="loop-exploration">
          <!-- <Hidable class="growing"> -->
          <LoopDetails example-act="loop-comparison-1" />
          <LoopBarchart example-act="loop-comparison-2" />
        </div>
      </Step>
      <Step
        example-act="flexibility-open"
        step="flexibility-filter"
        v-if="flexibilityFilterAvailable"
      >
        <LoopsFlexibilityDialog />
      </Step>
      <Step
        example-act="ccors-open"
        step="crosscorelation-filter"
        v-if="crosscorelationFilterAvailable"
      >
        <LoopsCrosscorelation />
      </Step>
      <Step
        example-act="pairing-open"
        step="loop-pairing"
        v-if="pairingAvailable"
      >
        <LoopsGraftSelection />
      </Step>
      <Step
        example-act="grafting-open"
        step="grafting"
        v-if="graftingAvailable"
      >
        <LoopsGrafting />
      </Step>
    </div>
    <ExampleMode />
    <Tooltip />
  </main>
</template>

<script>
import JobDetail from "../components/JobDetail";
import LoopsFlexibilityDialog from "../components/LoopsFlexibilityDialog";
import LoopsCrosscorelation from "../components/LoopCrosscorelation";
import LoopsProteinSelection from "../components/LoopsProteinSelection";
import LoopsGraftSelection from "../components/LoopsGraftSelection";
import LoopsGrafting from "../components/LoopsGrafting";
import LoopsSecsRefinment from "../components/LoopsSecsRefinment";
import Tooltip from "../components/Tooltip";
import Protein3DView from "../components/Protein3dView";
import Juxtaposition from "../components/Juxtaposition/Juxtaposition";
import LoopBarchart from "../components/LoopBarchart";
import LoopDetails from "../components/LoopDetails/LoopDetails";
import Step from "../components/Step";
import InterestingLoops from "../components/InterestingLoops/InterestingLoops";
import ExampleMode from "../components/ExampleMode";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "App",
  components: {
    JobDetail,
    Protein3DView,
    Juxtaposition,
    LoopsFlexibilityDialog,
    LoopBarchart,
    LoopsCrosscorelation,
    LoopsProteinSelection,
    LoopsGraftSelection,
    LoopsGrafting,
    LoopsSecsRefinment,
    Tooltip,
    LoopDetails,
    Step,
    InterestingLoops,
    ExampleMode,
  },
  created: function () {
    if (this.getInsert == null || this.getScaffold == null) {
      if (!this.$route.meta.activateExample) {
        this.$log.info("how did you get here?");
        this.$router.push({
          name: "new",
        });
      }
    }

    // this.$log.info("Start");
    // window.addEventListener("unhandledrejection", (event) => {
    //   if (event.reason && event.reason.ignoreUnhandledRejection) {
    //     event.preventDefault();
    //   }
    // });
  },

  async mounted() {
    if (this.$route.meta.activateExample) {
      console.log("example load...");
      this.setToken({ token: "exemplary-example" });
      await this.initializeExample();
    }
  },

  methods: {
    ...mapActions([
      "initializeExample",
      "setToken", //also supports payload `this.nameOfAction(amount)`
    ]),
  },
  computed: {
    ...mapGetters([
      "loopExplorationAvailable",
      "flexibilityFilterAvailable",
      "crosscorelationFilterAvailable",
      "graftingAvailable",
      "pairingAvailable",
      "getInsert",
      "getScaffold",
    ]),

    hasProteins() {
      return this.getInsert != null && this.getScaffold != null;
    },
  },
};
</script>

<style scoped>
.columize {
  display: flex;
  flex-direction: column;
}
</style>
