<template>
  <div class="f-tabs" ref="tabsRef">
    <div class="f-tabs__header" ref="headerRef">
      <div class="f-tab" ref="tabsRef1" :id="`f-tab-${tab.uid}`" v-for="tab in tabs" :key="tab.uid" @click="setActive(tab)">
        <h5>{{ tab.label }}</h5>
      </div>
    </div>
    <div class="f-tabs__content">
      <slot ref="tabsTest"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, useSlots, provide, withDefaults } from 'vue';

interface Tab {
  uid: number;
  name: string;
  label: string;
}

defineOptions({
  inheritAttrs: false,
});
interface Props {
  modelValue?: string | null;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
});

interface Emits {
  (e: 'update:modelValue', value: string): void;
}
const emit = defineEmits<Emits>();

const _slots1 = useSlots();

const tabsRef = ref<HTMLElement>();
const tabsRef1 = ref<HTMLElement>();
const headerRef = ref<HTMLElement>();
const _tabsArray = ref<Array<HTMLElement>>();
const _tabsComponents = ref<Array<unknown>>();
const _content = ref<unknown>();
const _target = ref<unknown>();
const _slots = ref<unknown>();
const value = ref<unknown>();
const tabsTest = ref<unknown>();
const tabs = ref<Array<Tab>>([]);
provide('value', value);
provide('addTab', (tab: Tab) => {
  tabs.value.push(tab);
});

provide('updateTab', (tab: Tab) => {
  const changedTabIndex = tabs.value.findIndex(obj => obj.uid === tab.uid);
  if (changedTabIndex > -1) {
    tabs.value[changedTabIndex] = tab;
  }
});
// provide('addTab', tabs.value)

onMounted(() => {
  nextTick(() => {
    if (props.modelValue) {
      const tab = tabs.value.find(obj => obj.name === props.modelValue);
      if (tab) {
        setActive(tab);
      }
    } else {
      const firstTab = tabs.value[0];
      if (firstTab) {
        setActive(firstTab);
      }
    }
  });
});

function setActive(tab: Tab) {
  nextTick(() => {
    const tabElement = headerRef.value?.querySelector(`#f-tab-${tab.uid}`) as HTMLElement | null;
    const array = Array.prototype.slice.call(tabsRef.value?.children[0].children);

    array.forEach((element: HTMLElement) => {
      element.classList.remove('f-tab--active');
    });
    if (tabElement) {
      tabElement.classList.add('f-tab--active');
    }
    value.value = tab.name;
    emit('update:modelValue', tab.name);
  });
}
</script>

<style lang="sass">
.f-tabs
    display: flex
    flex-direction: column
    width: 100%
    .f-tabs__header
        display: flex
        .f-tab, label
            cursor: pointer
        .f-tab
            padding: 0.6em 1em
            transition: background-color .2s,color .2s
            align-items: center
            justify-content: center
            font-weight: 400
            text-transform: uppercase
            font-size: 24px
            font-weight: bold
            border-width: 0 0 2px 0
            border-style: solid
            border-color: transparent
            flex: 1 1 auto
            text-align: center
            height: 50px
            border-bottom: 2px solid var(--color-light-grey)
            h5
                color: var(--color-tab-font)
                margin: 0
            &.f-tab--active
                border-bottom: 3px solid var(--color-tab-border--active)
                h5
                    color: var(--color-tab-border--active)
    .f-tabs__content
        padding: 16px 12px
        @media (min-width: 768px)
            padding: 16px 24px
</style>
