<script>
    import { speed, last_row_num, intervalID, increment, countDelay, cellHeight } from "../canvas_properties";
    import { stream_state } from "../../store";
    import { onMount } from "svelte";
    
    let slider_val = 100;
    let cell_height = 10;
    
    const handleClick = () => {};
    const handleClickCellHeight = () => {
        $cellHeight = cell_height;
    }

    const handleMouseup = () => {
        $speed = slider_val;
        if ($stream_state) {
            clearInterval($intervalID);
            $intervalID = setInterval(increment, countDelay());
        } else {
            clearInterval($intervalID);
        }
    };

    onMount(() => {
        $last_row_num = 0;
        $speed = slider_val;
    })
</script>

<div class="slider">    
    <label for="range-steps">Speed {slider_val}%</label>
    <input type="range" id="range-steps" min="0" max="100" on:click={handleClick} on:mouseup={handleMouseup}  bind:value={slider_val} />
</div>
<div class="slider">    
    <label for="cell_height">Cell height {cell_height}px</label>
    <input type="range" id="cell_height" min="1" max="40" on:click={handleClickCellHeight} on:mouseup={handleMouseup}  bind:value={cell_height} />
</div>

<style>
    .slider {
        padding-top: 5px;
    }
    input {
        width: 65%;
        float: right;
    }
    label {
        margin-right: 0px;
    }

</style>