<template>
  <div
    class="list"
    :style="cssProps()"
    :class="{list: isLastInList(), final: !isLastInList()}"
  ></div>
</template>

<script>
import { color } from "d3-color";

export default {
  name: "List",
  props: ["protein", "acid", "color"],
  methods: {
    isLastInList() {
      let nextAcid = this.protein.acids[this.acid.index + 1];
      return nextAcid?.simple_secondary_structure == "E";
    },
    cssProps() {
      return {
        "--protein-color": this.color,
        "--hover-color": color(this.color).brighter(1.2)

      };
    },
  }
};
</script>

<style scoped>
.list {
  flex: 1 1 0;
  background: var(--protein-color);
  height: 12px;
  border-top: 3px;
  border-bottom: 3px;
  border-left: 0px;
  border-right: 0px;
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;

}
.final {
  height: 20px;
  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
  border-style: none;
}
.list:hover{
    background: var(--hover-color);
    background-clip: padding-box;
}
</style>