import { useRef, useEffect } from "react";
import RangeSlider from "react-range-slider-input";
import { NumericFormat } from "react-number-format";
import "./multiRangeSlider.css";
import { IMultirangeSlider } from "../types/multirangeSlider";

interface MultiRangeSliderProps {
  onChange: (sliderId: string, e: [a: number, b: number]) => void;
  multirangeSlider: IMultirangeSlider;
}

const MultiRangeSlider = ({
  onChange,
  multirangeSlider,
}: MultiRangeSliderProps) => {
  const firstInputRef = useRef(null);
  const secondInputRef = useRef(null);

  const handleOnRangeInputChange = (e: [a: number, b: number]) => {
    onChange(multirangeSlider.id, e);
  };

  const handleOnFirstInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = Number(e.target.value.split(",").join(""));
    if (
      value >= multirangeSlider.minValue &&
      value <= multirangeSlider.maxValue
    ) {
      const rangeValue: [a: number, b: number] = [
        value,
        multirangeSlider.endValue,
      ];
      onChange(multirangeSlider.id, rangeValue);
    }
  };

  const handleOnSecondInputChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const value = Number(e.target.value.split(",").join(""));
    if (
      value >= multirangeSlider.minValue &&
      value <= multirangeSlider.maxValue
    ) {
      const rangeValue: [a: number, b: number] = [
        multirangeSlider.startValue,
        value,
      ];
      onChange(multirangeSlider.id, rangeValue);
    }
  };

  useEffect(() => {
    if (
      !firstInputRef.current ||
      multirangeSlider.startValue === multirangeSlider.minValue
    )
      return;
    (firstInputRef.current as HTMLInputElement).focus();
  }, [multirangeSlider.startValue]);

  useEffect(() => {
    if (
      !secondInputRef.current ||
      multirangeSlider.maxValue === multirangeSlider.endValue
    )
      return;
    (secondInputRef.current as HTMLInputElement).focus();
  }, [multirangeSlider.endValue]);

  return (
    <div className="">
      <div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
        <div className="flex justify-between">
          {/* <input
            ref={firstInputRef}
            key={multirangeSlider.startValue}
            type="string"
            onChange={handleOnFirstInputChange}
            defaultValue={formatNumber(multirangeSlider.startValue, ",", 3, 1)}
            className="focus:outline-none input_number w-1/2"
          /> */}
          <NumericFormat
            thousandSeparator=","
            key={multirangeSlider.startValue}
            onChange={handleOnFirstInputChange}
            defaultValue={multirangeSlider.startValue}
            className="focus:outline-none input_number w-1/2"
          />
          <NumericFormat
            thousandSeparator=","
            key={multirangeSlider.endValue}
            onChange={handleOnSecondInputChange}
            defaultValue={multirangeSlider.endValue}
            className="focus:outline-none input_number w-1/2 text-right"
          />
          {/* <input
            ref={secondInputRef}
            onChange={handleOnSecondInputChange}
            key={multirangeSlider.endValue}
            type="string"
            defaultValue={formatNumber(multirangeSlider.endValue, ",", 3, 1)}
            className="focus:outline-none appearance-none input_number text-right w-1/2"
          /> */}
        </div>
        <RangeSlider
          min={multirangeSlider.minValue}
          max={multirangeSlider.maxValue}
          value={[multirangeSlider.startValue, multirangeSlider.endValue]}
          className="absolute -bottom-3 left-0 w-[calc(100%-16px)] z-20"
          onInput={handleOnRangeInputChange}
        />
      </div>
    </div>
  );
};

export default MultiRangeSlider;