<script setup>

import { computed } from 'vue';

const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  showLabel: {
    type: Boolean,
    default: true,
  },
  slim: {
    type: Boolean,
    default: false,
  },
  showTrack: {
    type: Boolean,
    default: true,
  },
  busy: {
    type: Boolean,
    default: false,
  },
  mode: String // only really "indeterminate" is supported
});

const normalizedValue = computed(() => {
  if (props.value < 0) return 0;
  if (props.value > 100) return 100;
  return props.value;
});

</script>

<template>
  <div class="pankow-progress-bar">
    <div class="pankow-progress-bar-label" v-show="showLabel"><slot>{{ value + ' %' }}</slot></div>
    <div :class="{ 'pankow-progress-bar-background': showTrack }">
      <div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }">
        <div v-if="busy" class="pankow-progress-bar-glow" :style="{ height: slim ? '2px' : '6px' }"></div>
      </div>
      <div v-else class="pankow-progress-bar-indeterminate" :style="{ height: slim ? '2px' : '6px' }"></div>
    </div>
  </div>
</template>

<style>

.pankow-progress-bar {
  position: relative;
  font-weight: 700;
  user-select: none;
  border-radius: var(--pankow-border-radius);
  display: block;
}

.pankow-progress-bar-label {
  padding-bottom: 3px;
}

.pankow-progress-bar-background {
  border-radius: var(--pankow-border-radius);
  background-color: var(--pankow-color-light-dark);
}

@media (prefers-color-scheme: dark) {
  .pankow-progress-bar-background {
    background-color: var(--pankow-input-background-color);
  }
}

.pankow-progress-bar-filled {
  position: relative;
  background-color: var(--pankow-color-primary);
  transition: width 250ms;
  white-space: nowrap;
  border-radius: calc(var(--pankow-border-radius) / 1.5);
  height: 6px;
  overflow: hidden;
}

.pankow-progress-bar-glow {
  width: 100%;
  height: 6px;
  display: inline-block;
  position: absolute;
  overflow: hidden;
}

.pankow-progress-bar-glow::after {
  content: '';
  width: max(100px, 30%);
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent 90%);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
}

.pankow-progress-bar-indeterminate {
  width: 100%;
  height: 6px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pankow-border-radius) / 1.5);
}

.pankow-progress-bar-indeterminate::after {
  content: '';
  width: 90%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--pankow-color-primary));
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
  border-radius: calc(var(--pankow-border-radius) / 1.5);
}

@keyframes pankow-progress-bar-indeterminate-animation {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}


</style>