<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
    name: {
        default: '',
        type: String
    },
    min: {
        default: 0,
        type: Number
    },
    max: {
        default: 100,
        type: Number
    },
    step: {
        default: 5,
        type: Number
    },
})

const modelValue = defineModel()

onMounted(() => {
    value.value = modelValue.value
    draw(value.value)
})


const range = ref()
const selector = ref()

const isDragging = ref(false)
const value = ref(0)

const getValue = (event) => {
    if (isDragging.value == false) return value.value
    let rect = range.value.getBoundingClientRect()
    let x = 0
    if (event.changedTouches == undefined) {
        x = event.clientX
    } else {
        x = event.changedTouches[0].clientX
    }
    let countedValue = props.min;
    countedValue = x - rect.left;
    countedValue = countedValue / rect.width;
    countedValue = countedValue * props.max;
    countedValue = Math.round(countedValue / props.step) * props.step;
    countedValue = countedValue / (props.max - props.min);
    countedValue = Math.round(countedValue * 100);
    if (countedValue > props.max) countedValue = props.max;
    if (countedValue < props.min) countedValue = props.min;
    draw(countedValue)
    return countedValue
}
const draw = (countedValue) => {
    countedValue = countedValue * (props.max - props.min);
    countedValue = Math.round(countedValue / props.max);
    countedValue = props.max - countedValue;
    if (countedValue > 100) countedValue = 100;
    if (countedValue < 0) countedValue = 0;
    selector.value.style.width = (100 - countedValue) + '%'
}
const start = (event) => {
    isDragging.value = true
}
const select = (event) => {
    let v = getValue(event)
    value.value = v
}
const submit = (event) => {
    select(event);
    modelValue.value = value.value
    isDragging.value = false
}
</script>
<template>
    <div class="range">
        <div class="range-label">{{ props.name }}</div>
        <div class="range-wrapper">
            <div class="range-slider" ref="range" @mousedown="start($event)" @mousemove="select($event)"
                @mouseup="submit($event)" @touchstart="start($event)" @touchmove="select($event)"
                @touchend="submit($event)">
                <div class="range-slider-completed" ref="selector"></div>
                <div class="range-value">{{ value }}</div>
            </div>
        </div>
    </div>
</template>
<style>
.range-wrapper {
    width: 100%;
    display: flex;
    align-content: baseline;
    justify-content: center;
    padding: 0 2rem 1rem 2rem;
}
.range-label {
    text-align: center;
    width: 100%;
    font-size: large;
    padding-bottom: 0.5rem;
}
.range-value {
    font-size: large;
    font-weight: 600;
}
.range-slider {
    width: 100%;
    height: 30px;
    background-color: rgba(127, 165, 209, 0.349);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
}
.range-slider-completed {
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: inherit;
    transition: 0.1s;
}
</style>