import React, { useState } from "react";

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

type RangeViewSmallT = {
  id: string;
  defaultValue: number;
  theme?: "light" | "dark";
  minValue: number;
  maxValue: number;
};

const RangeViewSmall = (props: RangeViewSmallT) => {
  const { id, theme = "light", minValue, maxValue, defaultValue } = props;

  const handleDefaultValueStyle = (val: number) => {
    if (val >= 0 && val < 1) {
      return `calc(${val * 10}% - 10px)`;
    } else if (val >= 1 && val < 2) {
      return `calc(${val * 10}% - 10px)`;
    } else if (val >= 2 && val < 3) {
      return `calc(${val * 10}% - 12px)`;
    } else if (val >= 3 && val < 4) {
      return `calc(${val * 10}% - 13px)`;
    } else if (val >= 4 && val < 5) {
      return `calc(${val * 10}% - 14px)`;
    } else if (val >= 5 && val < 6) {
      return `calc(${val * 10}% - 15px)`;
    } else if (val >= 6 && val < 7) {
      return `calc(${val * 10}% - 16px)`;
    } else if (val >= 7 && val < 8) {
      return `calc(${val * 10}% - 17px)`;
    } else if (val >= 8 && val < 9) {
      return `calc(${val * 10}% - 18px)`;
    } else if (val >= 9 && val <= 9.5) {
      return `calc(${val * 10}% - 20px)`;
    } else if (val > 9.5 && val <= 10) {
      return `calc(${val * 10}% - 15px)`;
    }
  };

  return (
    <div
      className={
        theme === "light"
          ? styles.mainWrapperLightTheme
          : styles.mainWrapperDarkTheme
      }
      data-id={id}
    >
      <div className={styles.rangeWrapper}>
        <div className={styles.rangeLabelsPlaceholders}>
          <span
            style={
              defaultValue > 0
                ? theme === "light"
                  ? { backgroundColor: "#F26D22" }
                  : { backgroundColor: "#FFAE31" }
                : undefined
            }
          />
          <span
            style={
              defaultValue >= 5
                ? theme === "light"
                  ? { backgroundColor: "#F26D22" }
                  : { backgroundColor: "#FFAE31" }
                : undefined
            }
          />
          <span
            style={
              defaultValue >= 10
                ? theme === "light"
                  ? { backgroundColor: "#F26D22" }
                  : { backgroundColor: "#FFAE31" }
                : undefined
            }
          />
        </div>
        <div
          className={styles.sliderValueWrapper}
          // style={{
          //   left:
          //     defaultValue >= 5
          //       ? `${defaultValue * 8.7}%`
          //       : `${defaultValue * 5}%`,
          //   position: "absolute",
          //   transform: "translateX(0%)",
          // }}
          style={{
            // left: `${defaultValue * 10}%`,
            // left: `calc(${defaultValue * 10}% - 10px)`,
            // left: `${defaultValue * 10}% -100px`,
            left: handleDefaultValueStyle(defaultValue),
            // position: "absolute",
            transform: "translateX(0%)",
          }}
        >
          <span>{defaultValue}</span>
          <div className={styles.sliderValueArrow} />
        </div>

        <input
          type="range"
          defaultValue={defaultValue}
          min={minValue}
          max={maxValue}
          step={1}
          className={styles.range}
          // onChange={(e) => handleSwipeRange(e.target.value)}
          disabled={true}
        />
        <div
          className={styles.fillerSlider}
          style={{ width: `${defaultValue * 10}%` }}
        />
      </div>
    </div>
  );
};

export default RangeViewSmall;