<template>
  <l-button
    class="l-tab"
    :class="classes"
    outline
    :label="label"
    :size="size"
    :type="type"
    :to="to"
    :href="href"
    :style="{
      '--tab-hover': tabHover,
    }"
    :disable-hover="true"
    :shade="shade"
    :disabled="disabled"
    @click="onClick"
  >
    <l-icon
      v-if="hasIconSlot"
    >
      <slot name="icon" />
    </l-icon>
    <slot />
  </l-button>
</template>

<script>
import LButton from "./LButton.vue";
import LIcon from "./LIcon.vue";

export default {
  name: "LTab",
  components: { LButton, LIcon },
  props: {
    /**
     * The label of the tab.
     */
    label: {
      type: String,
    },
    /**
     * Active tab
     */
    active: {
      type: Boolean,
      default: false,
    },
     /**
     * Disable tab and click event
     */
     disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * The type of the tab.
     */
    type: {
      type: String,
      default: "primary",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The type of the button.
     */
    hover: {
      type: String,
      default: "primary",
      validator: function (value) {
        return (
          [
            "transparent",
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the type color.
     */
    shade: {
      type: [String, Number],
      default: "600",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
            50,
            100,
            200,
            300,
            400,
            500,
            600,
            700,
            800,
            900,
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the type color.
     */
    hoverShade: {
      type: [String, Number],
      default: "50",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
            50,
            100,
            200,
            300,
            400,
            500,
            600,
            700,
            800,
            900,
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The size of the tab.
     */
    size: {
      type: String,
      default: "medium",
      validator: function (value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    /**
     * href - tab will act as a native anchor element
     */
    href: {
      type: String,
    },
    /**
     * to - tab will act as a nuxt-link
     */
    to: {
      type: String,
    },
  },
  computed: {
    classes() {
      return ["l-tab--" + this.type, this.active ? null : "l-tab--inactive"];
    },
    tabHover() {
      if (this.hover === "transparent") {
        return "transparent";
      }
      if (this.hover === "white" || this.hover === "black") {
        return `var(--${this.hover})`;
      }
      return `var(--${this.hover}-${this.hoverShade})`;
    },
    hasIconSlot() {
      return !!this.$slots.icon;
    },
  },
  methods: {
    onClick() {
      this.$emit("click");
    },
  },
};
</script>
<style>
.l-tab {
  border-radius: 0;
  border-width: 0px;
  border-bottom-width: var(--spacing-0-5);
  font-weight: 400;
}
.l-tab .l-button {
  flex-direction: row-reverse;
}
.l-tab--inactive,
.l-button--outline.l-button--white.l-tab--inactive {
  border-bottom-color: transparent;
}
.l-tab--white {
  color: var(--white);
}

/* focused */
.l-tab:focus,
.l-tab:hover {
  outline: none;
  background-color: var(--tab-hover);
}

/* Active tab */
.l-tab--white:not(.l-tab--inactive),
.l-tab.nuxt-link-exact-active,
.l-button--outline.l-button--white.nuxt-link-exact-active {
  border-color: var(--primary-500);
}
</style>
