<template>
  <div
    class="preview-pdb-number"
    :style="pdbNumberPreviewStyle()"

  >{{previewingAcid.pdb_number}}</div>
</template>

<script>
export default {
  data: function() {
    return {
      previewingAcid: {pdb_number: 0},
      previewing: false,
      previewingAcidX: 0
    };
  },
  props: ["protein", "previewingAcidData"],
  methods: {
    viewPdbNumber(acid, event) {
      this.previewing = true;
      this.previewingAcid = acid;
      this.previewingAcidX =
        event.target.offsetLeft;
    },
    hidePdbNumber() {
      this.previewing = false;
    },
    pdbNumberPreviewStyle() {
      return {
        left: `calc(${this.previewingAcidX}px - 1ex)`,
        color: `${this.protein.color}`,
        visibility: this.previewing ? "visible": "hidden"
      };
    }
  },
  watch:{
    previewingAcidData: function(acidData){
      if(acidData == null){
        this.hidePdbNumber();
      } else {
        this.viewPdbNumber(acidData.acid, acidData.$event);
      }
    }
  }
};
</script>

<style scoped>
.preview-pdb-number{
  position: relative;
  width: 3ex;
  text-align: center;
}

</style>