"use client";

import "rc-slider/assets/index.css";
import "./range.css";

import Slider from "rc-slider";

export type RangeValue = { start: number; end: number };

export interface RangeSliderProps {
  min?: number;
  max?: number;
  isMultiple: boolean;
  value: RangeValue | number;
  /**
   *
   * @description - if isMultiple is true, value is RangeValue, else value is number
   */
  onChange?: (value: RangeValue | number) => void;
  onChangeComplete?: (value: RangeValue | number) => void;
}

const RangeSlider: React.FC<RangeSliderProps> = ({
  value,
  min,
  max,
  isMultiple,
  onChange,
  onChangeComplete,
  ...props
}) => {
  return (
    <Slider
      range={isMultiple}
      className="h-5 w-full"
      min={min}
      max={max}
      value={
        isMultiple && typeof value === "object"
          ? [
              (value as unknown as RangeValue).start,
              (value as unknown as RangeValue).end,
            ]
          : (value as number)
      }
      styles={{
        handle: {
          border: "1px solid var(--color-primary-500)",
          width: "24px",
          height: "24px",
          marginTop: "-11px",
          opacity: 1,
        },
        track: {
          height: 4,
          backgroundColor: "var(--color-primary-500)",
        },
        rail: {
          height: 4,
        },
      }}
      handleStyle={max! - min! <= 1 ? [{ left: "0%" }, { left: "100%" }] : []}
      onChange={(_value: number | number[]) => {
        if (isMultiple && Array.isArray(_value)) {
          onChange?.({ end: _value[1]!, start: _value[0]! });
        } else {
          onChange?.(_value as number);
        }
      }}
      onChangeComplete={(_value: number | number[]) => {
        if (isMultiple && Array.isArray(_value)) {
          onChangeComplete?.({ end: _value[1]!, start: _value[0]! });
        } else {
          onChangeComplete?.(_value as number);
        }
      }}
      {...props}
    />
  );
};

export { RangeSlider };