<template>
  <v-badge
    v-if="showBadge"
    :color="color"
    v-bind="$attrs"
    :location="location"
    :offset-x="offsetX"
    :offset-y="offsetY"
    :dot="dot"
    :content="badge"
    :style="badgeStyle"
    class="eli-badge"
  >
    <slot />
  </v-badge>

  <template v-else>
    <slot />
  </template>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import type {
  CssLength,
  IndicadorLocalizacao,
  IndicadorOffset,
  IndicadorPresetRaio,
} from "../../tipos";

const RADIUS_MAP: Record<IndicadorPresetRaio, string> = {
      suave: "4px",
      pill: "10px",
    };

export default defineComponent({
  name: "EliBadge",

  inheritAttrs: false,

  props: {
    color: {
      type: String,
      default: "primary",
    },

    location: {
      type: String as PropType<IndicadorLocalizacao>,
      default: "top right",
    },

    offsetX: {
      type: String as PropType<IndicadorOffset>,
      default: "0",
    },

    offsetY: {
      type: String as PropType<IndicadorOffset>,
      default: "0",
    },

    dot: {
      type: Boolean,
      default: false,
    },

    visible: {
      type: Boolean,
      default: true,
    },

    badge: {
      type: [String, Number] as PropType<string | number | undefined>,
      default: undefined,
    },

    /** 🔥 NOVO: controla só o radius */
    radius: {
      type: String as PropType<IndicadorPresetRaio | CssLength>,
      default: "suave",
    },
  },

  setup(props) {
    
    const resolvedRadius = computed(() => {
      // preset conhecido
      if (props.radius in RADIUS_MAP) {
        return RADIUS_MAP[props.radius as IndicadorPresetRaio];
      }

      // valor custom (ex: "8px", "50%", "0")
      return props.radius;
    });
    const showBadge = computed(() => {
      // se for dot, respeita visible
      if (props.dot) return props.visible;

      // se tiver badge, respeita visible
      if (props.badge !== undefined) return props.visible;

      return false;
    });

    const badgeStyle = computed(() => ({
      "--eli-badge-radius": resolvedRadius.value,
    }));

    return { showBadge, badgeStyle };
  },
});
</script>

<style>
.eli-badge .v-badge__badge,
.eli-badge .v-badge__content {
  border-radius: var(--eli-badge-radius) !important;
}
</style>
