<template>
    <div class="balancer">
        <div class="bs-input-field bs-font-medium-1-normal">
            <div>Volume uplift</div>
            <q-input
                v-model="_volume"
                type="number"
                :min="0"
                :max="1"
                outlined
                debounce="2000"
                dense
            />
        </div>
        <q-slider
            v-model="sliderValue"
            :min="0"
            :max="1"
            step="0.1"
            selection-color="transparent"
            inner-track-color="slider-inner-track"
            :style="{ 'max-width': '100%', flex: 1 }"
        />
        <div class="bs-input-field bs-font-medium-1-normal">
            <div>Profit uplift</div>
            <q-input
                v-model="_profit"
                type="number"
                :min="0"
                :max="1"
                outlined
                debounce="2000"
                dense
            />
        </div>
    </div>
</template>

<script>
export default {
    props:{
        profit: Number,
        volume: Number
    },
    data() {
        return {
            sliderValue: 1 - this.volume,
            _volume: this.volume,
            _profit: this.profit,
        };
    },
    emits: ["update:values"],
    watch: {
        sliderValue(newSliderValue) {
            // Calculate volume and profit based on the slider value
            this._volume = (1 - newSliderValue).toPrecision(2);
            this._profit = newSliderValue;
        },
        _volume(newVolume) {
            // Update slider value when volume changes
            this.sliderValue = 1 - newVolume;
            this.$emit("update:values", {volume: this._volume, profit: this._profit})
        },
        _profit(newProfit) {
            // Update slider value when profit changes
            this.sliderValue = newProfit;
            this.$emit("update:values", {volume: this._volume, profit: this._profit})
        },
        volume(newVal){
            this._volume = newVal;
        },
        profit(newVal){
            this._profit = newVal;
        },
    },
};
</script>

<style scoped>
.balancer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: end;
    gap: 20px;
    justify-content: space-between;
}

.bs-input-field {
    width: 100%;
    max-width: 80px;
    color: #333E48;
}
:deep(.q-field--outlined .q-field__control) {
    padding: 0 8px !important;
    height: 28px;
    font-size: 12px;
}
</style>
