import { Slider, SxProps, Theme, useTheme } from "@mui/material";

import type { ReactNode } from "react";

type CustomSliderProps = {
  defaultValue?: number;
  value?: number | number[];
  min?: number;
  max?: number;
  step?: number;
  sx?: SxProps<Theme>;
  onChange?: (_: Event, value: number | number[]) => void;
  onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
  valueLabelFormat?: (value: number, index: number) => ReactNode;
};

export const CustomSlider = ({
  defaultValue,
  value,
  min = 0,
  max = 100,
  step,
  onChange,
  onChangeCommitted,
  valueLabelFormat,
  sx,
}: CustomSliderProps) => {
  // const handleChange = ({ type }: Event, newValue: number | number[]) => {
  //     // Для корректной работы слайдера в FireFox
  //     if (type !== "change") {
  //         onChange?.(e, newValue);
  //     }
  // };
  const theme = useTheme();

  return (
    <Slider
      value={value}
      defaultValue={defaultValue}
      min={min}
      max={max}
      step={step}
      onChange={onChange}
      valueLabelDisplay="on"
      onChangeCommitted={onChangeCommitted}
      valueLabelFormat={valueLabelFormat}
      onMouseDown={(e) => e.stopPropagation()}
      data-cy="slider"
      sx={{
        color: "#7E2AEA",
        padding: "0",
        marginTop: "75px",
        "& .MuiSlider-valueLabel": {
          background: "#7E2AEA",
          borderRadius: "8px",
          minWidth: "60px",
          width: "auto",
          whiteSpace: "nowrap",
          textAlign: "center",
          height: "36px",
        },
        "& .MuiSlider-valueLabel::before": {
          width: "6px",
          height: "2px",
          transform: "translate(-50%, 50%) rotate(90deg)",
          bottom: "-5px",
        },
        "& .MuiSlider-rail": {
          backgroundColor: "#F2F3F7",
          border: `1px solid #9A9AAF`,
          height: "12px",
        },
        "& .MuiSlider-thumb": {
          border: "3px #f2f3f7 solid",
          height: "23px",
          width: "23px",
        },
        "& .MuiSlider-track": {
          height: "12px",
        },
        ...sx,
      }}
    />
  );
};