<template>
  <div
    class="l-badge"
    :class="classes"
    :title="label"
    :style="{
      '--badge-bg': badgeBG,
      '--badge-text': badgeText,
      '--badge-radius': badgeRadius,
    }"
  >
    <slot></slot>
    <span v-if="label">{{ label }}</span>
  </div>
</template>

<script>
export default {
  name: "l-badge",
  props: {
    /**
     * The label of the badge.
     */
    label: {
      type: String,
    },
    /**
     * The type of the badge.
     */
    type: {
      type: String,
      default: "primary",
      validator: function (value) {
        return (
          [
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the type color.
     */
    shade: {
      type: String,
      default: "500",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * Outline style of the badge.
     */
    outline: {
      type: Boolean,
      default: false,
    },
    /**
     * The size of the badge.
     */
    size: {
      type: String,
      default: "small",
      validator: function (value) {
        return (
          ["tiny", "x-small", "small", "medium", "large"].indexOf(value) !== -1
        );
      },
    },
     /**
     * The radius of the badge.
     */
    radius: {
      type: String,
      default: "3xl",
      validator: function (value) {
        return (
          [
            "none",
            "sm",
            "base",
            "md",
            "lg",
            "xl",
            "2xl",
            "3xl",
            "full",
          ].indexOf(value) !== -1
        );
      },
    },
  },
  computed: {
    classes() {
      return [
        "l-badge--" + this.type,
        "l-badge-size--" + this.size,
        {
          "l-badge--outline": this.outline,
        },
      ];
    },
    badgeRadius() {
      return `var(--radius-${this.radius})`;
    },
    badgeBG() {
      if (this.type === "white" || this.type === "black") {
        return `var(--${this.type})`;
      }
      return `var(--${this.type}-${this.shade})`;
    },
    badgeText() {
      if (this.type === "white") {
        return `var(--black)`;
      }
      if (this.type === "black") {
        return `var(--white)`;
      }
      if (Number(this.shade) > 300) {
        return `var(--${this.type}-50)`;
      }
      return `var(--${this.type}-900)`;
    },
  },
};
</script>

<style>
.l-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-0-5);
  padding: var(--spacing-0-5) var(--spacing-2);
  background-color: var(--badge-bg);
  border: 1px solid var(--badge-bg);
  color: var(--badge-text);
  font-size: var(--sizing-sm);
  border-radius: var(--badge-radius);
  font-weight: bold;
  transition: all var(--duration-100) ease-in-out;
  text-decoration: none;
  user-select: none;
}
/* Types */
.l-badge--white {
  background-color: var(--white);
  border-color: var(--white);
  color: inherit;
}
.l-badge--black {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--badge-text);
}

/* Outline & text style badge */
.l-badge--outline {
  background-color: transparent;
  border-color: inherit;
  color: var(--badge-bg);
}
.l-badge--outline {
  border-color: inherit;
}

/* Sizes */
.l-badge-size--tiny {
  width: var(--spacing-2);
  height: var(--spacing-2);
  padding: var(--spacing-0);
}
.l-badge-size--tiny * {
  display: none;
}
.l-badge-size--x-small {
  padding: var(--spacing-0) var(--spacing-2);
  font-size: var(--sizing-xs);
}
.l-badge-size--small {
  font-size: var(--sizing-xs);
}
.l-badge-size--large {
  font-size: var(--sizing-base);
}
</style>
