<template>
  <div>
    <!-- <div v-if="!exampleMode" class="example">
      <LabelButton @click="startExample()">
        Guide Mode (Scaffold - 6G75:A, Insert - 2PSF:B)
      </LabelButton>
    </div>
    <div v-if="!exampleMode" class="dividor"></div> -->
    <div>
      Scaffold:
      <span class="protein-name" v-if="getScaffold != null">
        <span class="censor">
          {{ getScaffold.displayName }}:{{ getScaffold.chain }}
        </span>
        <RemoveButton @click="removeRole('scaffold')" />
      </span>
    </div>
    <ProteinLoader example-act="scaffold-edit" role="scaffold" />
    <div class="dividor"></div>
    <div>
      Insert:
      <span class="protein-name" v-if="getInsert != null">
        <span class="censor"
          >{{ getInsert.displayName }}:{{ getInsert.chain }}</span
        >
        <RemoveButton @click="removeRole('insert')" />
      </span>
    </div>
    <ProteinLoader  role="insert" />
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import ProteinLoader from "./ProteinSelection/ProteinLoader";
import RemoveButton from "./PanelButtons/RemoveButton";
import LabelButton from "./PanelButtons/TextLabelButton";
export default {
  components: {
    ProteinLoader,
    RemoveButton,
    LabelButton,
  },
  methods: {
    ...mapActions(["removeRole"]),
    ...mapMutations(["setExampleMode"]),
    startExample() {
      this.setExampleMode(true);
      this.$tours["exampleMode"].start();
    },
  },
  computed: {
    ...mapGetters(["getScaffold", "getInsert", "exampleMode"]),
  },
};
</script>

<style scoped>
.example {
  display: flex;
}
</style>