"use client";

import { useState } from "react";
import { Input, InputProps } from "rizzui";
import cn from "../../utils/class-names";
import { PiClock, PiCaretDownBold } from "react-icons/pi";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

type TimePickerProps = {
  selected?: Date | null;
  onChange?: (date: Date | null) => void;
  inputProps?: InputProps;
  popperClassName?: string;
};

export const TimePicker = ({
  selected,
  onChange,
  inputProps,
  popperClassName,
}: TimePickerProps) => {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex w-full">
      <ReactDatePicker
        selected={selected}
        onChange={(date: Date | null) => onChange?.(date)}
        showTimeSelect
        showTimeSelectOnly
        timeIntervals={15}
        timeCaption="Time"
        dateFormat="h:mm aa"
        customInput={
          <Input
            prefix={<PiClock className="w-5 h-5 text-gray-500" />}
            suffix={
              <PiCaretDownBold
                className={cn(
                  "h-4 w-4 text-gray-500 transition",
                  open && "rotate-180"
                )}
              />
            }
            {...inputProps}
          />
        }
        onCalendarOpen={() => setOpen(true)}
        onCalendarClose={() => setOpen(false)}
        popperClassName={cn("z-[9999]", popperClassName)}
      />
    </div>
  );
};