<template>
  <div
    v-b-tooltip.hover.top="tooltipText"
    class="sammo-bar"
    :style="{
      height: `${props.height + 2}px`,
      position: 'relative',
      borderTop: 'solid 1px #888',
      borderBottom: 'solid 1px #333',
      margin: 'auto',
      width: props.width === undefined ? '100%' : props.width,
    }"
  >
    <div
      class="sammo-bar-base"
      :style="{
        position: 'absolute',
        left: '0',
        width: '100%',
        height: `${props.height}px`,
        backgroundImage: `url('${imagePath}/pr${props.height - 2}.gif')`,
        backgroundRepeat: 'repeat-x',
        backgroundPosition: 'center',
      }"
    ></div>
    <div
      class="sammo-bar-in"
      :style="{
        position: 'absolute',
        left: '0',
        width: `${clamp(props.percent, 0, 100)}%`,
        height: `${props.height}px`,
        backgroundImage: `url('${imagePath}/pb${props.height - 2}.gif')`,
        backgroundRepeat: 'repeat-x',
        backgroundPosition: 'left center',

      }"
    />
  </div>
</template>

<script lang="ts" setup>
import { clamp } from "lodash-es";
import { computed } from "vue";
const imagePath = window.pathConfig.gameImage;
const props = defineProps<{
  height: 7 | 10;
  width?: string;
  percent: number;
  altText?: string;
}>();

const tooltipText = computed(() => {
  if(props.altText){
    return props.altText;
  }
  return `${props.percent.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
});
</script>
