<template>
  <div>
    <div
      ref="content"
      :class="'tabs-switch'"
      :style="gridStyle"
      @wheel.prevent="wheelItBetter($event)"
    >
      <span
        v-for="item in slots"
        :key="item.id"
        class="medium-12px scale-item"
        :class="{ 'tab-active': currentTab === item.id }"
        :style="`width: ${slotWidth}px`"
        @click="switchTab(item.id)"
        >{{ $t(item.name) }}</span
      >
      <div class="slider" :style="sliderStyle" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    slots: {
      type: Array,
      default: null,
    },
    currentTab: {
      type: Number,
      default: 1,
    },
    switchTab: {
      type: Function,
      required: true,
    },
    slotWidth: {
      type: Number,
      default: null,
    },
    sliderWidth: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      upHere: false,
      container: this.$refs.content,
    };
  },
  computed: {
    sliderStyle() {
      return {
        width: `${this.sliderWidth}px`,
        left: `${
          ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth
        }px`,
      };
    },
    gridStyle() {
      return {
        gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`,
      };
    },
  },
  methods: {
    wheelItBetter(event) {
      if (event.deltaY < 0) {
        this.$refs.content.scrollLeft -= 25;
      } else {
        this.$refs.content.scrollLeft += 25;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-switch {
  position: relative;
  width: calc(95vw - 320px);
  height: 45px;
  margin-left: 32px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 32px;
  align-items: end;
  border-bottom: 1px solid $faint-secondary-primary-10;
  overflow-x: auto;
  white-space: nowrap;
  &::-webkit-scrollbar {
    height: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(26, 62, 91, 0.2);
    border-radius: 16px;
    background-clip: content-box;
    height: 10px;
  }
}

.tab-active {
  color: $red-brand-primary;
  transition: ease-in 0.15s;
}

.slider {
  position: absolute;
  height: 0px;
  border-bottom: 4px solid $red-brand-primary;
  transition: ease-in 0.2s;
  bottom: 0px;
}

.scale-item {
  display: inline-block;
  margin-right: 6px;
  cursor: pointer;
  &:hover {
    transition: ease-in 0.2s;
    color: #e11717;
  }
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.date-clear {
  margin-left: auto;
  cursor: pointer;
}
</style>
