<template>
  <q-btn
    padding="4px 8px"
    class="TabSection"
    :icon="isShowMenu ? 'pgs-close' : 'pgs-lists'"
  >
    <q-menu
      :offset="[-3, 20]"
      @before-show="isShowMenu = true"
      @before-hide="isShowMenu = false"
    >
      <q-list class="TabSection-List">
        <q-item
          v-for="item in tabSections"
          :key="item.label"
          clickable
          v-close-popup
          class="TabSection-Item"
        >
          <q-item-section @click="scrollToElement(item.elementId)">
            {{ item.label }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { TabSection } from '@/recruits/components/recruit-card/tab-sections/interfaces';

@Component({})
export default class TabSections extends Vue {
  @Prop({ type: Array, default: () => [] }) tabSections: Array<TabSection>;

  isShowMenu = false;

  scrollToElement(elementId: string): void {
    const element = document.getElementById(elementId);
    if (element) {
      const headerHeight = 134 + 16;
      const elementRect = element.getBoundingClientRect();
      const absoluteTop = elementRect.top + window.pageYOffset - headerHeight;
      window.scrollTo({
        top: absoluteTop,
        behavior: 'smooth',
      });
    }
  }
}
</script>

<style lang="scss">
.TabSection {
  font-size: 9px;
  border-radius: 24px;
  background: #e5f4fc;
  border: 1px solid #cee3ee;
  color: #107abc;

  &-List {
    width: 374px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 42px 0 rgba(7, 46, 71, 0.11),
      0 4px 20px 0 rgba(7, 46, 71, 0.12);
  }
  &-Item {
    padding: 8px 12px;
    color: rgba(2, 12, 18, 0.9);
    font-family: 'Golos UI', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }
}
</style>
