import React, { useState, useEffect, useRef } from "react";

import styles from "./RangeSlider.scss"

import tw from "twin.macro"
 


export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
  let ref = useRef(null)

  useEffect(() => {
    if (ref.current) {
      ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
    }
  })

  return (
    <div tw="flex flex-col py-2" {...props}>
      <div className="rs-label w-full" ref={ref}>
        {!right ? (rangeType + "" + value) : (value + "" + rangeType)}
      </div>
      <input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)}  />
    </div>
  );
}