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

import styles from "./RangeView.module.scss";

type RangeViewT = {
  id: string;
  label: string;
  // handleSwipe: (e: any) => void;
  theme?: "light" | "dark";
  minValue: number;
  maxValue: number;
  step: number;
  defaultValue?: number;
  sliderValue: any;
  setSliderValue: (e: any) => void;
};

const RangeView = (props: RangeViewT) => {
  const {
    id,
    label,
    theme = "light",
    minValue,
    maxValue,
    step,
    defaultValue,
    setSliderValue,
    sliderValue,
  } = props;

  // const [sliderValue, setSliderValue] = useState(0);

  const handleSwipeRange = (value: string) => {
    setSliderValue(+value);
    // handleSwipe(+value);
  };

  return (
    <div
      className={
        theme === "light"
          ? styles.mainWrapperLightTheme
          : styles.mainWrapperDarkTheme
      }
      data-id={id}
    >
      <p className={styles.label}>{label}</p>
      <div className={styles.rangeWrapper}>
        <div className={styles.rangeLabelsPlaceholders}>
          <span
            style={
              sliderValue > 0
                ? theme === "light"
                  ? { backgroundColor: "#F26D22" }
                  : { backgroundColor: "#FFAE31" }
                : undefined
            }
          />
          <span
            style={
              sliderValue >= 50
                ? theme === "light"
                  ? { backgroundColor: "#F26D22" }
                  : { backgroundColor: "#FFAE31" }
                : undefined
            }
          />
          <span
            style={
              sliderValue >= 100
                ? theme === "light"
                  ? { backgroundColor: "#F26D22" }
                  : { backgroundColor: "#FFAE31" }
                : undefined
            }
          />
        </div>
        {sliderValue !== 0 && (
          <div
            className={styles.sliderValueWrapper}
            style={{ left: `${sliderValue}%`, transform: "translateX(-50%)" }}
          >
            <span>{sliderValue}</span>
            <div className={styles.sliderValueArrow} />
          </div>
        )}
        <input
          type="range"
          defaultValue={sliderValue}
          min={minValue}
          max={maxValue}
          step={step}
          className={styles.range}
          onChange={(e) => handleSwipeRange(e.target.value)}
        />
        <div
          className={styles.fillerSlider}
          style={{ width: `${sliderValue}%` }}
        />
        <div className={styles.rangeLabels}>
          <span>{minValue}</span>
          <span>{(minValue + maxValue) / 2}</span>
          <span>{maxValue}</span>
        </div>
      </div>
    </div>
  );
};

export default RangeView;