import "rc-slider/assets/index.css";
import Slider from "rc-slider";
import { useSoundContext } from "../../context/SoundContext";

const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
  const { dispatch, state } = useSoundContext();

  const getVolumeOption = (soundCategory: string) => {
    if (soundCategory === "SIGHTINGVOLUME") {
      return state.sightingVolume;
    }
    if (soundCategory === "NPEDVOLUME") {
      return state.NPEDsoundVolume;
    }
    if (soundCategory === "HOTLISTVOLUME") {
      return state.hotlistSoundVolume;
    }
  };

  const volume = getVolumeOption(soundCategory);

  const handleChange = (value: number | number[]) => {
    const number = typeof value === "number" ? value : value[0];
    dispatch({ type: soundCategory, payload: number });
  };

  return (
    <div className="flex flex-row w-full lg:w-[40%] space-x-5">
      <Slider
        min={0}
        max={1}
        onChange={handleChange}
        value={volume}
        step={0.1}
        styles={{
          handle: {
            width: "1.2rem",
            height: "1.2rem",
            marginTop: -7,
            backgroundColor: "#3b82f6",
            border: "2px solid white",
            borderRadius: "50%",
            boxShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
          },
          track: {
            backgroundColor: "#3b82f6",
            height: 6,
          },
          rail: {
            backgroundColor: "#e5e7eb",
            height: 6,
          },
        }}
      />
      <span>{volume ? volume * 10 : 1}</span>
    </div>
  );
};

export default SliderComponent;