import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';

export default defineComponent({
  name: 'CRISBalanceBar',
  props: {
    // Saldo corrente
    currentBalance: {
      type: Number,
      required: true,
      default: 0,
    },
    // Limite minimo (negativo)
    minLimit: {
      type: Number,
      required: true,
      default: -100,
    },
    // Limite massimo (positivo)
    maxLimit: {
      type: Number,
      required: true,
      default: 200,
    },
    // Label opzionale
    label: {
      type: String,
      default: '',
    },
    small: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '',
    },
    info: {
      type: Boolean,
      default: true,
    }
  },
  setup(props) {

    const { t } = useI18n();
    // Range totale
    const totalRange = computed(() => {
      return Math.abs(props.minLimit) + props.maxLimit;
    });

    // Larghezza zona negativa in percentuale
    const negativeZoneWidth = computed(() => {
      return (Math.abs(props.minLimit) / totalRange.value) * 100;
    });

    // Larghezza zona positiva in percentuale
    const positiveZoneWidth = computed(() => {
      return (props.maxLimit / totalRange.value) * 100;
    });

    const zeroPosition = computed(() => {
      return negativeZoneWidth.value;
    });

    // Posizione indicatore in percentuale (0-100)
    const indicatorPosition = computed(() => {
      // Il minLimit è negativo, quindi lo convertiamo in positivo per il calcolo
      const offsetFromMin = props.currentBalance - props.minLimit;
      const position = (offsetFromMin / totalRange.value) * 100;

      // Clamp tra 0 e 100
      return Math.max(0, Math.min(100, position));
    });

    // Classe CSS per il colore in base al saldo
    const balanceClass = computed(() => {
      if (props.currentBalance < 0) return 'negative';
      if (props.currentBalance === 0) return 'neutral';
      return 'positive';
    });

    // Quanto può ancora dare (quanto può andare in negativo)
    const canGive = computed(() => {
      return Math.abs(props.minLimit) + props.currentBalance;
    });

    // Quanto può ancora ricevere (quanto può andare in positivo)
    const canReceive = computed(() => {
      return props.maxLimit - props.currentBalance;
    });

    return {
      negativeZoneWidth,
      positiveZoneWidth,
      indicatorPosition,
      balanceClass,
      canGive,
      canReceive,
      zeroPosition,
      t,
    };
  },
});