<template>
  <div class="circle" :class="{ is360: is360 }">
    <div class="tick zero">180</div>
    <div class="tick up">90</div>
    <div class="tick left">0</div>
    <div class="tick down" v-if="is360">270</div>

    <div
      v-for="(loop, index) in details"
      class="needle"
      :key="`needle-loop-${index}-${label}`"
      v-show="!isNaN(selector(loop.loop))"
      :style="{
        transform: `translate(60px, 58px) rotate(${
          selector(loop.loop) ? selector(loop.loop) - 180 : -180
        }deg)`,
        background: loop.loop.color != null ? loop.loop.color : loop.protein.color,
      }"
      @mouseenter="
        setPreview({
          $event,
          description: {
            Protein: loop.protein.name,
            Loop: loop.loop.id,
            Value: round(selector(loop.loop), 2),
          },
        })
      "
      @mouseleave="setPreview(null)"
    ></div>

    <div class="center">{{ label }}</div>
  </div>
</template>

<script>
import RoundMixin from "../../mixins/RoundMixin"
import DetailsMixin from "@/mixins/DetailsMixin";
import { mapMutations } from "vuex";
export default {
  props: {
    details: Array,
    selector: Function,
    label: String,
    is360: Boolean,
  },
  mixins: [DetailsMixin, RoundMixin],
  computed: {
    name() {
      return this.data;
    },
  },
  methods: {
    ...mapMutations(["setPreview"]),
  },
};
</script>

<style scoped>
.circle {
  height: 60px;
  width: 120px;
  border-radius: 100px 100px 0 0;
  border: 1px #aaa solid;
  border-bottom: 1px #ccc solid;

  background: var(--neutral);
}
.center {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 100px 100px 100px 100px;
  transform-origin: center center;

  transform: translate(44px, 44px);
  background: var(--neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px #aaa solid;
  color: #aaa;
}

.tick {
  position: absolute;
  height: 1px;
  width: 50px;
  transform-origin: center left;
  text-align: end;
  color: #ccc;
  transform: translate(60px, 60px);
  background: #ccc;
}

.up {
  transform: translate(60px, 60px) rotate(-90deg);
}

.down {
  text-align: start;
  transform: translate(60px, 110px) rotate(-90deg);
}

.left {
  text-align: start;
  transform: translate(10px, 60px);
}

.needle {
  position: absolute;
  height: 4px;
  width: 55px;
  transform-origin: center left;
  border-radius: 5px 5px;
  /* transform: rotate(-90deg); */
  /* transform: translate(50px, 48px) rotate(-180deg); */
}

.is360 {
  height: 120px;
  border-radius: 100px 100px 100px 100px;
  border-bottom: 1px #aaa solid;
}
</style>