<template>
  <DragSelect
    class="protein-viz"
    attribute="index"
    @change="emitSelectedAcids($event)"
  >
    <template v-for="acid in protein.getAcids(from, to)">
      <component
        v-if="acid.chain.toLowerCase() == protein.chain.toLowerCase()"
        :key="`acid-${acid.index}`"
        :is="getComponent(acid.simple_secondary_structure)"
        :protein="protein"
        :color="colorBy(acid)"
        :acid="acid"
        :index="acid.index"
        :class="{ selected: selected.includes(String(acid.index)) }"
        class="acid"
        :id="`acid-${acid.pdb_number}`"
        @mouseenter.native="hoverAcid($event, acid)"
        @mouseleave.native="unhoverAcid()"
      />
    </template>
  </DragSelect>
</template>

<script>
import Coil from "./Coil";
import List from "./List";
import Helix from "./Helix";
import Fail from "./Fail";
import DragSelect from "drag-select-vue";
import { mapMutations } from "vuex";
export default {
  props: [
    "enableSelection",
    "protein",
    "from",
    "to",
    "colorBy",
    "additionalData",
  ],

  components: {
    Coil,
    List,
    Helix,
    Fail,
    DragSelect,
  },
  data() {
    return {
      selected: [],
      hovered: null,
    };
  },
  computed: {
    hoveredDescription() {
      return this.hovered?.acid?.index ?? "";
    },
  },

  methods: {
    ...mapMutations(["setPreview"]),

    hoverAcid($event, acid) {
      this.setPreview({
        $event,
        description: {
          Acid: acid.acid_name,
          "PDB n.": acid.pdb_number,
          Index: acid.index,
          DSSP: acid.secondary_structure,
          ...this.bindDataToAcid(acid),
        },
      });

      // this.protein.setSelection({ from: acid, to: this.protein.acids[acid.index+1] });
    },
    unhoverAcid() {
      this.setPreview(null);
    },
    getComponent(secondaryStructure) {
      if (secondaryStructure == "C") {
        return "Coil";
      } else if (secondaryStructure == "H") {
        return "Helix";
      } else if (secondaryStructure == "E") {
        return "List";
      } else {
        return "Fail";
      }
    },

    emitSelectedAcids(selection) {
      if (this.enableSelection) {
        this.$emit("input", selection);
      }
      this.selected = selection;
    },

    bindDataToAcid(acid) {
      let boundData = {};
      for (let prop in this.additionalData) {
        boundData[prop] = this.additionalData[prop](acid);
      }
      return boundData;
    },
  },
};
</script>

<style scoped>
.protein-viz {
  display: flex;
  align-items: center;
  height: 40px;
}
</style>