<template>
  <div
    class="helix"
    :style="cssProp()"
    :class="{back: isInBack(),
             front: !isInBack(), 
             threeturn: is310Helix(),
             fourturn: isAlphaHelix(),
             fiveturn: isPiHelix()}"
  ></div>
</template>

<script>
import { color } from "d3-color";
export default {
  name: "Helix",
  props: ["protein", "acid", "color"],
  methods: {
    isInBack() {
      return this.acid.index % 2;
    },
    cssProp() {
      return {
        "--front-color": this.color,
        "--bg-color": color(this.color).copy({ opacity: 0.5 }),
        "--front-color-hover": color(this.color).brighter(1.2),
        "--bg-color-hover": color(this.color)
          .copy({ opacity: 0.5 })
          .brighter(1.2)
      };
    },

    is310Helix() {
      return this.acid.secondary_structure == "G"
    },

    isAlphaHelix(){
      return this.acid.secondary_structure == "H"
    },

    isPiHelix(){
      return this.acid.secondary_structure == "I"
    }
  }
};
</script>

<style scoped>
.helix {
  flex: 1 1 0;
  transform: scaleX(2);
  height: 20px;
}

.threeturn {
  /* 16 */
  height: 20px; 
}

.fourturn {
  height: 20px;
}

.fivetrun {
  /* 24 */
  height: 20px;
}



.front {
  background: var(--front-color);
  clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
}
.back {
  background: var(--bg-color);
  clip-path: polygon(0 0, 50% 0, 100% 100%, 50% 100%);
}

.front:hover {
  background: var(--front-color-hover);
}

.back:hover {
  background: var(--bg-color-hover);
}
</style>