<template>
  <span
    class="tf-badge"
    :class="[
      { 'is-solid': isSolid },
      { 'is-pill': isPill },
      { 'is-counter': isCounter },
      `is-${size} is-${status}`,
    ]"
    v-text="value"
  />
</template>

<script>
  /**
   * "TfBadge" is a component used for displaying a variety of badges throughout our applications.
   *
   * @vuedoc
   * @exports TfBadge
   * @category components
   */
  export default {
    name: 'TfBadge',
    props: {
      /**
       * Boolean used to determine if the badge should be used as a counter, which is a unique style when showing notifications.
       */
      isCounter: {
        type: Boolean,
        default: false,
      },
      /**
       * Boolean used to determine if the badge should be pill shaped with completely rounded corners.
       */
      isPill: {
        type: Boolean,
        default: false,
      },
      /**
       * Boolean used to determine if the badge should have a background color identical to its border.
       */
      isSolid: {
        type: Boolean,
        default: false,
      },
      /**
       * String used to determine the various padding and font styles.
       */
      size: {
        type: String,
        default: 'medium',
        validator: (value) => ['small', 'medium', 'large'].includes(value),
      },
      /**
       * String used to determine the status of the badge.
       */
      status: {
        type: String,
        default: 'notify',
        validator: (value) => ['error', 'notify', 'success', 'warn'].includes(value),
      },
      /**
       * String or number used as text for the badge.
       */
      value: {
        type: [String, Number],
        required: true,
      },
    },
  };
</script>

<style scoped lang="scss">
  @import 'src/assets/styles/variables';

  span {
    display: inline-block;
    font: {
      size: 12px;
      weight: 700;
    }
    text: {
      align: center;
      transform: uppercase;
    }
    letter-spacing: 1px;
    border: 1px solid;
    border-radius: 5px;

    &.is {
      // Sizes
      &-small {
        padding: 2px 5px;
        font: {
          size: 10px;
          weight: 600;
        }
        line-height: 12px;
        letter-spacing: inherit;

        &.is-pill:not(.is-counter) {
          padding: {
            right: 8px;
            left: 8px;
          }
        }
      }

      &-medium {
        padding: 3px 5px;

        &.is-pill:not(.is-counter) {
          padding: {
            right: 8px;
            left: 8px;
          }
        }
      }

      &-large {
        padding: 3px 16px;
      }

      // Statuses
      &-error {
        color: $tf-danger;
        background: $tf-danger-light;
        border-color: $tf-danger;

        &.is-solid,
        &.is-counter {
          background: $tf-danger;
        }
      }

      &-notify {
        color: $tf-dark-gray;
        border-color: $tf-dark-gray;

        &.is-solid,
        &.is-counter {
          background: $tf-dark-gray;
        }
      }

      &-success {
        color: $tf-success;
        background: $tf-success-light;
        border-color: $tf-success;

        &.is-solid,
        &.is-counter {
          background: $tf-success;
        }
      }

      &-warn {
        color: $tf-warning;
        background: $tf-warning-light;
        border-color: $tf-warning;

        &.is-solid,
        &.is-counter {
          background: $tf-warning;
        }
      }

      // Misc styles
      &-counter {
        box-sizing: border-box;
        height: 20px;
        min-width: 20px;
        padding: 2px 5px;
        border: 1px solid $tf-white;
        border-radius: 10px;
        font: {
          size: 12px;
          weight: 700;
        }
        letter-spacing: inherit;
        line-height: 12px;
        color: $tf-white;
      }

      &-pill {
        border-radius: 100px;
      }

      &-solid {
        color: $tf-white;
      }
    }
  }
</style>
