<template>
  <div class="tab" :class="classes" @click="click">
    <div class="tab__label">
      <slot />
    </div>
    <div v-if="badge && type === 'badge'" class="tab__badge">
      <fp-badge
        :icon-l="badgeIconL"
        :icon-r="badgeIconR"
        :size="badgeSize"
        :disabled="disabled"
        :styles="!disabled ? (active ? 'primary' : badgeStyles) : null"
      >
        {{ badge }}
      </fp-badge>
    </div>
  </div>
</template>

<script>
import "../../assets/scss/tab.scss";
import fpBadge from "../Badge/Badge.vue";

export default {
  name: "fpTab",
  components: {
    fpBadge,
  },
  props: {
    type: {
      type: String,
      default: "default",
      validator(value) {
        return ["default", "badge", "chip"].indexOf(value) !== -1;
      },
    },
    value: {
      type: [Number, String],
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    badge: {
      type: String,
      default: null,
    },
    badgeIconL: {
      type: String,
      default: null,
    },
    badgeIconR: {
      type: String,
      default: null,
    },
    badgeStyles: {
      type: String,
      default: "default",
      validator(value) {
        return (
          ["default", "primary", "success", "danger", "warning"].indexOf(
            value
          ) !== -1
        );
      },
    },
    badgeSize: {
      type: String,
      default: "micro",
      validator(value) {
        return ["medium", "small", "tiny", "micro"].indexOf(value) !== -1;
      },
    },
  },
  computed: {
    classes() {
      return {
        [`tab--${this.type}`]: this.type !== "default",
        "tab--active": !this.disabled && this.active,
        "tab--disabled": this.disabled,
      };
    },
    active() {
      return this.value === this.$parent.$props.value;
    },
  },
  methods: {
    click() {
      if (!this.disabled) {
        this.$emit("click");
        this.$parent.$emit("input", this.value);
      }
    },
  },
};
</script>
