<template>
    <span>{{ displayValue }}</span>
  </template>
  
  <script>
  export default {
    props: {
      value: {
        required: true,
        type: [Number, String]
      },
      duration: {
        type: Number,
        default: 1000
      },
      prefix: {
        type: String,
        default: ''
      },
      suffix: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        displayValue: '0',
        interval: null,
        startTimestamp: null,
        currentValue: 0,
        targetValue: 0
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(newValue) {
          // Clear any existing animation
          clearInterval(this.interval);
          
          // Parse the new value - handle formatted strings with commas
          const parsedNewValue = typeof newValue === 'string' 
            ? parseFloat(newValue.replace(/,/g, '')) 
            : parseFloat(newValue);
            
          // Set target
          this.targetValue = isNaN(parsedNewValue) ? 0 : parsedNewValue;
          
          // Start from 0 for the first animation only
          if (this.currentValue === 0) {
            this.currentValue = 0;
          }
          
          // Set the start timestamp
          this.startTimestamp = Date.now();
          
          // Start the animation
          this.startAnimation();
        }
      }
    },
    methods: {
      formatValue(value) {
        // Format numeric value similar to your existing format
        if (typeof this.value === 'string' && this.value.includes(',')) {
          // If original value has commas, format with commas
          return this.prefix + value.toLocaleString() + this.suffix;
        }
        
        // Just add prefix/suffix for numbers or simpler strings
        return this.prefix + value.toString() + this.suffix;
      },
      
      startAnimation() {
        const startValue = this.currentValue;
        const changeInValue = this.targetValue - startValue;
        const startTime = this.startTimestamp;
        const duration = this.duration;
        
        this.interval = setInterval(() => {
          const elapsed = Date.now() - startTime;
          const progress = Math.min(elapsed / duration, 1);
          
          // Calculate current value using an easing function
          this.currentValue = startValue + changeInValue * this.easeOutCubic(progress);
          
          // Update the displayed value
          if (Number.isInteger(this.targetValue)) {
            // For integers, round to whole numbers during animation
            this.displayValue = this.formatValue(Math.round(this.currentValue));
          } else {
            // For decimals, keep 2 decimal places during animation
            this.displayValue = this.formatValue(parseFloat(this.currentValue.toFixed(2)));
          }
          
          // If animation complete
          if (progress === 1) {
            clearInterval(this.interval);
            this.displayValue = this.formatValue(this.targetValue);
          }
        }, 16); // ~60fps
      },
      
      easeOutCubic(x) {
        // Cubic easing function for smooth animation
        return 1 - Math.pow(1 - x, 3);
      }
    },
    beforeDestroy() {
      clearInterval(this.interval);
    }
  }
  </script> 