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";

const TIME_SEPARATOR = ":";

export interface TimeRangeValue {
  start: string; // This is a string time value with TIME_SEPARATOR = : (e.g. 01:00)
  end: string; // This is a string time value TIME_SEPARATOR = : (e.g. 20:00)
}

interface TimeRangeProps {
  /**
   * Step time in minutes. Default is 15 minutes.
   */
  stepTime: number;
  initialValue?: TimeRangeValue;
  onChange: (value: TimeRangeValue) => void;
}

// This function generates calculated values for the range slider as string time value.
function generateTimeValues(stepTime: number, val: number): string {
  const hours = Math.floor(val / (60 / stepTime));
  const minutes = (val % (60 / stepTime)) * stepTime;
  const time = `${hours.toString().padStart(2, "0")}${TIME_SEPARATOR}${minutes
    .toString()
    .padStart(2, "0")}`;
  return time;
}
// refactor this function according to generateTimeValues reverse
function generateInitialValue(stepTime: number, value: string): number {
  const [hours, minutes] = value.split(TIME_SEPARATOR);
  const time =
    Number(hours || "00") * (60 / stepTime) +
    Number(minutes || "00") / stepTime;
  return time;
}

const TimeText = ({ time }: { time: string }) => (
  <span className="text-sm font-medium text-gray-500">{time}</span>
);

function TimeRange({ stepTime = 15, initialValue, onChange }: TimeRangeProps) {
  const debounceChange = useDebouncedCallback(onChange, 1000);
  const endValue = (60 / stepTime) * 24;
  const [val, setVal] = useState<RangeValue>({
    start: initialValue?.start
      ? generateInitialValue(stepTime, initialValue.start)
      : 0,
    end: initialValue?.end
      ? generateInitialValue(stepTime, initialValue.end)
      : endValue,
  });

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

  return (
    <div className="flex flex-col items-stretch justify-between gap-3">
      <div className="flex items-center justify-between">
        <TimeText time={generateTimeValues(stepTime, val.start)} />
        <TimeText time={generateTimeValues(stepTime, 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={0}
          max={endValue}
          onChange={(arg) => handleChange(arg as unknown as RangeValue)}
        />
      </div>
    </div>
  );
}

export default TimeRange;