<template>
  <div>
    <slot></slot>
    <div class="sm:hidden" :class="tabClasses">
      <label for="tabs" class="sr-only">Select a tab</label>
      <select
        v-model="activeTab"
        @change="switchTabForMobile($event.target.selectedIndex)"
        class="selector-focus-class block w-full rounded-md border-gray-300 pr-6 pl-4 text-sm"
        :style="computedStyles"
        id="tabs"
      >
        <option
          v-for="tab in tabs"
          :key="tab.text"
          :value="tab.name"
          :id="getActionIDFn(tab.text)"
          class="text-sm"
        >
          {{ tab.text }}
        </option>
      </select>
    </div>
    <div :class="['hidden sm:block', navClasses]">
      <div
        :class="[
          'flex items-center justify-between border-b border-gray-200',
          extraNavClasses,
        ]"
      >
        <nav :class="classes" class="-mb-px flex" aria-label="Tabs">
          <a
            v-for="tab in isExtraTabs ? tabsList : tabs"
            :key="tab.text"
            :id="getActionIDFn(tab.text)"
            @click="switchTab(tab.name)"
            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
            :class="[
              activeTab == tab.name
                ? 'anchor-selected-class'
                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
              tab.isDisabled ? 'pointer-events-none opacity-50' : 'opacity-100',
            ]"
            :style="computedStyles"
          >
            <c-icon
              v-if="tab.icon"
              :name="tab.icon"
              class="-ml-0.5 mr-2 h-5 w-5"
              :class="
                activeTab == tab.name
                  ? 'icon-selected-class'
                  : 'text-gray-400 group-hover:text-gray-500 '
              "
              :style="computedStyles"
              :type="tab.iconType ? tab.iconType : 'solid'"
              :viewBox="tab.viewBox ? tab.viewBox : '0 0 20 20'"
            ></c-icon>
            <span
              :class="
                activeTab == tab.name
                  ? 'span-selected-class'
                  : 'text-gray-500 hover:text-gray-700'
              "
              :style="computedStyles"
            >
              {{ tab.text }}
            </span>
            <div class="ml-2" v-if="tab.count">
              <span
                :class="
                  activeTab == tab.name
                    ? 'count-active-class rounded-full px-2 py-0.5'
                    : 'rounded-full bg-gray-100 px-2 py-0.5 text-gray-900'
                "
                :style="computedStyles"
              >
                {{ tab.count }}
              </span>
            </div>
          </a>
          <a
            v-if="extraTabsCount > 0"
            @click="handleMoreTabs"
            class="group relative inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 border-transparent"
          >
            <span
              class="anchor-extra-tabs text-sm font-medium hover:underline"
              :style="computedStyles"
              >+{{ extraTabsCount }} more</span
            >
            <div
              v-if="openDropdown"
              class="absolute top-12 -left-32 z-10 w-44 rounded-md border border-gray-200 bg-white py-1 shadow-sm"
            >
              <p
                v-for="tab in extraTabs"
                :key="tab.text"
                :id="getActionIDFn(tab.text)"
                @click="handleSwitchTabs(tab.name)"
                class="py-2 px-4 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700"
              >
                {{ tab.text }}
              </p>
            </div>
          </a>
        </nav>
        <div>
          <slot name="customComp"> </slot>
        </div>
      </div>
    </div>
    <div v-for="(tab, index) in tabs" :key="index">
      <div v-show="tab.name == activeTab">
        <slot :name="`tab-panel-${tab.name}`"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { getActionID } from "../../helper";
import { COLOR_CONFIG } from "../../colorConfig";
// import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CTabs",
  // components: { CIcon },
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    id: {
      type: String,
    },
    initialTab: {
      type: String,
    },
    classes: {
      type: String,
      default: "space-x-3",
    },
    tabClasses: {
      type: String,
    },
    extraTabs: {
      type: Array,
    },
    tabsList: {
      type: Array,
    },
    extraTabsCount: {
      type: Number,
    },
    isExtraTabs: {
      type: Boolean,
    },
    navClasses: {
      type: String,
      default: "",
    },
    extraNavClasses: {
      type: String,
      default: "",
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },
  data() {
    return {
      activeTab: this.initialTab,
      openDropdown: false,
    };
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
    switchTab(tabText, type = "") {
      this.activeTab = tabText;
      if (type != "handler") {
        this.$emit("handleTabsUpdate", tabText);
      }
    },
    switchTabForMobile(index) {
      var selectedOption = this.tabs[index];
      this.activeTab = selectedOption.name;
    },
    handleSwitchTabs(tab) {
      this.$emit("updateTabsList", tab);
      this.switchTab(tab, "handler");
    },
    handleMoreTabs() {
      this.openDropdown = !this.openDropdown;
    },
  },
  watch: {
    initialTab() {
      this.activeTab = this.initialTab;
    },
  },
  computed: {
    computedStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--color-100": colors.shade100,
        "--color-500": colors.shade500,
        "--color-600": colors.shade600,
        "--color-700": colors.shade700,
        "--color-800": colors.shade800,
        "--color-900": colors.shade900,
      };
    },
  },
};
</script>

<style scoped>
.selector-focus-class:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-500) !important;
  border-color: var(--color-500);
}
.anchor-selected-class {
  border-color: var(--color-600);
  color: var(--color-700);
}
.anchor-selected-class:hover {
  color: var(--color-800);
}
.icon-selected-class {
  color: var(--color-700);
}
.icon-selected-class:group-hover {
  color: var(--color-800);
}
.span-selected-class {
  color: var(--color-700);
}

.count-active-class {
  background-color: var(--color-100);
  color: var(--color-900);
}
.anchor-extra-tabs {
  color: var(--color-800);
}
</style>
