<template>
  <main 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>
      <Step step="protein-selection" class="step protein-selection">
        <LoopsProteinSelection />
      </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 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 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, mapMutations } from "vuex";

export default {
  name: "App",
  components: {
    Protein3DView,
    Juxtaposition,
    LoopsFlexibilityDialog,
    LoopBarchart,
    LoopsCrosscorelation,
    LoopsProteinSelection,
    LoopsGraftSelection,
    LoopsGrafting,
    Tooltip,
    LoopDetails,
    Step,
    InterestingLoops,
    ExampleMode,
  },
  created: function () {
    this.$log.info("Start");
    window.addEventListener("unhandledrejection", (event) => {
      if (event.reason && event.reason.ignoreUnhandledRejection) {
        event.preventDefault();
      }
    });
  },
  computed: {
    ...mapGetters([
      "loopExplorationAvailable",
      "flexibilityFilterAvailable",
      "crosscorelationFilterAvailable",
      "graftingAvailable",
      "pairingAvailable",
    ]),
  },
};
</script>

<style scoped>

.columize {
  display: flex;
  flex-direction: column;
}

</style>
