import React, { useState } from "react";
import { useDebouncedCallback } from "use-debounce";

import type { RangeValue } from "@/components/ui/range-slider/range-slider";
import { RangeSlider } from "@/components/ui/range-slider/range-slider";

interface HourRangeProps {
  /**
   * Range value for the slider.
   * Default is 1 to 48.
   */
  rangeValue?: RangeValue;
  /**
   * Initial value for the slider.
   */
  initialValue?: RangeValue;
  onChange: (value: RangeValue) => void;
}

const HourText = ({ hour }: { hour: number }) => (
  // @todo - add translation for 'Saat'
  <span className="text-sm font-medium text-gray-500">{hour} Saat</span>
);

function HourRange({
  initialValue,
  rangeValue = {
    start: 1,
    end: 48,
  },
  onChange,
}: HourRangeProps) {
  const debounceChange = useDebouncedCallback(onChange, 1000);
  const [val, setVal] = useState<RangeValue>({
    start: initialValue?.start || 0,
    end: initialValue?.end || 0,
  });

  const handleChange = (value: RangeValue) => {
    setVal(value as unknown as RangeValue);
    debounceChange({
      start: value.start,
      end: value.end,
    });
  };

  return (
    <div className="flex flex-col items-stretch justify-between gap-3">
      <div className="flex items-center justify-between">
        <HourText hour={val.start} />
        <HourText hour={val.end} />
      </div>
      <div className="px-3">
        <RangeSlider
          isMultiple
          value={val}
          // This is zero because we want to start from 00:00 as default.
          min={rangeValue.start || 1}
          max={rangeValue.end || 48}
          onChange={(arg) => handleChange(arg as unknown as RangeValue)}
        />
      </div>
    </div>
  );
}

export default HourRange;