<template>
  <b-popover
    placement="left"
    triggers="focus"
    :show.sync="show"
    custom-class="apply-reload-popover"
    :target="`popover-action-${id}`"
    @hidden="onHidden"
  >
    <b-button
      id="popover-apply-button"
      variant="popover"
      :class="{ 'hovered-apply-button': scale === topPosition }"
      @mouseover="scale = topPosition"
      @click="
        () => {
          show = false;
          appalyOnReload();
        }
      "
    >
      При перезагрузке
    </b-button>
    <b-button
      id="popover-apply-button"
      variant="popover"
      :class="{ 'hovered-apply-button': scale === middlePosition }"
      @mouseover="scale = middlePosition"
      @click="
        () => {
          show = false;
          appalyOption1();
        }
      "
    >
      Опция 1
    </b-button>
    <b-button
      id="popover-apply-button"
      variant="popover"
      :class="{ 'hovered-apply-button': scale === bottomPosition }"
      @mouseover="scale = bottomPosition"
      @click="
        () => {
          show = false;
          appalyOption2();
        }
      "
    >
      Опция 2
    </b-button>
    <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
  </b-popover>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: null,
    },
    appalyOnReload: {
      type: Function,
      default: null,
    },
    appalyOption1: {
      type: Function,
      default: null,
    },
    appalyOption2: {
      type: Function,
      default: null,
    },
    applyType: {
      type: String,
      default: 'reload',
    },
  },
  data() {
    return {
      topPosition: 5,
      middlePosition: 33,
      bottomPosition: 60,
      show: false,
      scale: 5,
    };
  },
  methods: {
    onHidden() {
      if (this.applyType === 'reload') {
        this.scale = this.topPosition;
      } else if (this.applyType === 'option1') {
        this.scale = this.middlePosition;
      } else {
        this.scale = this.bottomPosition;
      }
    },
  },
};
</script>
<style lang="scss">
.analytical-table__status {
  width: 10%;
}

#popover-apply-ractive {
  padding-left: 5px;
}

.hovered-apply-button {
  color: $white;
}
</style>
<style lang="scss" scoped>
#popover-apply-button {
  justify-content: flex-start;
  width: 240px;
}

.slider {
  width: 240px;
  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>
