<template>
  <div>
    <nav
      class="group relative flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
      aria-label="Tabs"
    >
      <div
        class="absolute inset-y-0.5 rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out"
        :style="overlayStyle"
      ></div>
      <button
        v-for="(tabOption, index) in tabOptions"
        :key="index"
        ref="tabButtons"
        class="relative z-10 flex min-w-0 flex-grow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
        :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
        :id="id"
        :style="computedStyles"
        :aria-label="tabOption.label"
        :aria-selected="getTabIdentifier(tabOption) === currentTab"
        :aria-current="getTabIdentifier(tabOption) === currentTab"
        :aria-controls="getTabIdentifier(tabOption)"
        @click="handleButtonClick(tabOption)"
      >
        <div
          class="inset-tabs-classes flex min-w-0 flex-grow items-center justify-center space-x-2 rounded-md p-1.5 text-sm font-medium lg:pl-2.5 lg:pr-3.5"
        >
          <c-icon
            v-if="tabOption.icon"
            :type="tabOption.icon.type"
            :class="[
              'inset-tabs-icon h-5 w-5',
              getTabIdentifier(tabOption) === currentTab
                ? 'inset-tabs-icon-selected'
                : 'text-gray-400',
            ]"
            cursorType="cursor-pointer"
            :name="tabOption.icon.name"
            :viewBox="tabOption.icon.viewBox"
          ></c-icon>
          <span
            v-if="tabOption.showLabel"
            :class="[
              'inset-tabs-label',
              getTabIdentifier(tabOption) === currentTab
                ? 'text-gray-900'
                : 'text-gray-600 group-hover:text-gray-900',
            ]"
            >{{ tabOption.label }}</span
          >
        </div>
      </button>
    </nav>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
import { COLOR_CONFIG } from "../../colorConfig";

export default {
  name: "CInsetTabs",
  components: {
    CIcon,
  },
  props: {
    currentTab: {
      type: String,
    },
    id: {
      type: String,
    },
    tabOptions: {
      type: Array,
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },
  data() {
    return {
      overlayStyle: {
        width: "0px",
        transform: "translateX(0px)",
      },
    };
  },
  methods: {
    getTabIdentifier(tabOption) {
      return tabOption.value !== undefined ? tabOption.value : tabOption.label;
    },
    handleButtonClick(tabOption) {
      const identifier = this.getTabIdentifier(tabOption);
      this.$emit("update-tab", identifier);
    },
    updateOverlayPosition() {
      const tabButtons = this.$refs.tabButtons;
      if (!tabButtons) return;
      
      const index = this.tabOptions.findIndex(
        (tab) => this.getTabIdentifier(tab) === this.currentTab
      );
      const tabButton = tabButtons[index];
      if (!tabButton) return;
      
      this.overlayStyle.width = `${tabButton.offsetWidth}px`;
      this.overlayStyle.transform = `translateX(${tabButton.offsetLeft}px)`;
    },
  },
  computed: {
    computedStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--inset-tab-icon-color": colors.shade700,
      };
    },
  },
  watch: {
    currentTab() {
      this.$nextTick(this.updateOverlayPosition);
    },
  },
  mounted() {
    this.$nextTick(this.updateOverlayPosition);
  },
};
</script>


<style>
.inset-tabs-icon.inset-tabs-icon-selected {
  color: var(--inset-tab-icon-color);
}
</style>