<template>
  <b-popover
    :placement="placement"
    triggers="focus"
    :show.sync="show"
    custom-class="popover-heigth-100"
    :target="`popover-choice-${id}`"
    @hidden="onHidden"
  >
    <b-button
      id="popover-choice-button"
      variant="popover"
      :class="{ 'selected-choice-button': scale === topPosition }"
      @mouseover="scale = topPosition"
      @click="
        () => {
          show = false;
          firstAction();
        }
      "
    >
      {{ fitstOption }}
    </b-button>
    <b-button
      id="popover-choice-button"
      variant="popover"
      :class="{ 'selected-choice-button': scale === bottomPosition }"
      @mouseover="scale = bottomPosition"
      @click="
        () => {
          show = false;
          secondAction();
        }
      "
    >
      {{ secondOption }}
    </b-button>
    <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
  </b-popover>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: null,
    },
    fitstOption: {
      type: String,
      default: null,
    },
    secondOption: {
      type: String,
      default: null,
    },
    chosenOption: {
      type: String,
      default: null,
    },
    firstAction: {
      type: Function,
      default: null,
    },
    secondAction: {
      type: Function,
      default: null,
    },
    placement: {
      type: String,
      default: 'bottom',
    },
  },
  data() {
    return {
      topPosition: 5,
      bottomPosition: 33,
      show: false,
      scale: 5,
    };
  },
  methods: {
    onHidden() {
      if (this.secondOption === this.chosenOption) {
        this.scale = this.bottomPosition;
      } else {
        this.scale = this.topPosition;
      }
    },
  },
};
</script>
<style lang="scss">
#popover-unit-ractive {
  padding-left: 5px;
}

.hovered-unit-button {
  color: $white;
}
</style>
<style lang="scss" scoped>
#popover-choice-button {
  width: 89px;
}

.slider {
  width: 89px;
  height: 28px;
  border-radius: 8px;
  background-color: $red-brand-primary;
  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
  position: absolute;
  transition: ease-in 0.2s;
  z-index: -1;
}
</style>
