import InputRange from "react-input-range";
import {useEffect, useState} from "react";
import {PriceRange} from "../../libs/utils";
import {isEmpty} from "radash";

/* eslint-disable-next-line */
export interface ShopAmountRangeProps {
  range?: PriceRange;
  onChange?: (range: PriceRange) => void;
}

export function ShopAmountRange({range = {min: 10, max: 599}, onChange}: ShopAmountRangeProps) {
  const [value, setValue] = useState(!isEmpty(range) ? range : {min: 10, max: 599});

  useEffect(() => {
    setValue(!isEmpty(range) ? range : {min: 10, max: 599});
  }, [range]);
  const inputRangeChange = (value) => setValue(value);
  const inputRangeChangeComplete = (value) => {
    if (onChange) {
      onChange(value);
    }
  }

  return (
    <div className="px-5 pb-4">
      <section className="my-3 p-3 h-[40px]">
        <InputRange
          onChange={inputRangeChange}
          onChangeComplete={inputRangeChangeComplete}
          value={value}
          minValue={10}
          step={15}
          formatLabel={value => `${value} €`}
          maxValue={600} />
      </section>
    </div>
  );
}

export default ShopAmountRange;