<template>
  <slot name="router" :tab="tab">
    <span
      data-testid="tab"
      class="tab"
      :class="{
        active: isActive,
        error: tab.error,
        disabled: tab.disabled,
      }"
      @click="emits('click', $event)"
    >
      {{ tab.name }}
    </span>
  </slot>
</template>

<script lang="ts" setup>
import { Tab } from '@/models/tab.model';
import { computed, ComputedRef } from 'vue';
import { isTabSelected } from '@/helpers/tab.helper';

const props = withDefaults(
  defineProps<{
    selectedTabId: string | null;
    tab: Tab;
  }>(),
  {},
);

const emits = defineEmits<{
  (e: 'click', event: MouseEvent): void;
}>();

const isActive: ComputedRef<boolean> = computed(() =>
  isTabSelected(props.tab, props.selectedTabId),
);
</script>

<style lang="scss">
.tab {
  --tab-border-color: transparent;
  --tab-color: var(--bms-font-color);

  color: var(--tab-color);
  text-decoration: none;
  border-bottom: 4px solid var(--tab-border-color);
  padding: 0 8px 16px 8px;
  cursor: pointer;
  //:deep(a) {
  //  color: var(--tab-color);
  //  text-decoration: none;
  //}
  &:hover,
  &__hover {
    --tab-border-color: var(--bms-main-50);
    text-decoration: none;
  }

  &.active {
    --tab-border-color: var(--bms-main-100);
  }

  &.disabled {
    --tab-border-color: transparent;
    --tab-color: var(--bms-grey-50);
    pointer-events: none;
  }

  &.error {
    --tab-border-color: var(--bms-danger-color);
    --tab-color: var(--bms-danger-color);
  }
}
</style>
