<template>
  <div class="RedesignedTabs">
    <div class="RedesignedTabs__BtnBox" />
    <q-tabs
      :dense="dense"
      inline-label
      :value="currentTab"
      outside-arrows
      class="RedesignedTabs__Bar"
      left-icon="pgs-shevron-left-off"
      right-icon="pgs-shevron-right-off"
      indicator-color="accent"
    >
      <q-tab
        v-for="tab in tabsCast"
        :key="tab.id"
        :name="tab.path"
        :label="tab.name"
        :icon="tab.icon"
        v-show="isVisible(tab)"
        content-class="RedesignedTabs__TabItem"
        @click="clickHandlerCast(tab)"
        :disable="tab.disabled"
        :alert="tab.alert ? tab.alert : false"
      >
        <q-tooltip v-if="tab.tooltip" content-class="RedesignedTabs__Tooltip">
          {{ tab.tooltip }}
        </q-tooltip>
      </q-tab>
    </q-tabs>
    <div class="RedesignedTabs__BtnBox">
      <tab-sections v-show="tabSections.length" :tab-sections="tabSections" />
    </div>
  </div>
</template>

<style lang="scss">
.RedesignedTabs {
  &__Tooltip {
    max-width: 210px;
    font-family: Golos UI, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
  }
  &__Bar {
    color: #020c12; // Цвет подсветки когда наводишь мышку, также им красит стрелочки при скроле
    --q-color-accent: #1487cf;

    .q-tab {
      .q-tab__indicator {
        filter: blur(1px);
      }
      &__alert {
        right: -12px;
      }
      &.q-tab--active .RedesignedTabs__TabItem .q-tab__label {
        color: #015e98;
      }
    }

    &:not(.q-tabs--dense) .q-tab {
      background-color: transparent;

      .q-focus-helper {
        display: none;
      }

      min-height: 36px;

      // Это что бы подчёркивание было паралельно под текстом как в макетах
      // .q-tab__indicator {
      //   left: 14px;
      //   right: 14px;
      // }
    }

    &.q-tabs--dense .q-tab {
      min-height: 32px;
    }

    &:not(.q-tabs--dense) .RedesignedTabs__TabItem .q-tab__label {
      font-family: 'Golos UI';
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      text-transform: lowercase;
      &::first-letter {
        text-transform: uppercase;
      }
    }

    &.q-tabs--dense .RedesignedTabs__TabItem .q-tab__label {
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 10px;
      line-height: 12px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #020c12;
    }
  }
}
</style>

<style lang="scss" scoped>
.RedesignedTabs {
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  height: 34px;
  &__BtnBox {
    display: flex;
    align-items: center;
    width: 32px;
  }
}
</style>

<script lang="ts" src="./index.ts" />
