import "rc-slider/assets/index.css";
import Slider from "rc-slider";
import { Tooltip } from "react-tooltip";
import "react-tooltip/dist/react-tooltip.css";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const SliderWithTooltip = (props) => {
  const { findText } = useTranslation(wordStore);
  const { value, setValue, ...restProps } = props;
  return (
    <>
      <Tooltip
        anchorSelect={findText(".rc-slider-handle")}
        place={findText("top")}
        variant="info"
        content={value}
        id="my-tooltip"
        className="tooltip-styles"
      />
      <Slider
        onChange={(nextValues) => {
          setValue(nextValues[0]);
          //console.log("Change:", nextValues);
        }}
        value={value}
        min={0}
        max={124080}
        defaultValue={10}
        step={1}
        className={findText("slider-styles")}
        range
        tipFormatter={(value) => `${value}%`}
        // count={3}
        // value={10}
        pushable
        // trackStyle={[{ backgroundColor: "#30d568" }]}
        // handleStyle={[
        //   { backgroundColor: "#ffffff" },
        //   { backgroundColor: "#00c2c2" },
        // ]}
        // railStyle={{ backgroundColor: "#00c2c2" }}
        // handleRender={handleRender}
      />
    </>
  );
};
export default SliderWithTooltip;
