import React, { forwardRef } from "react";
//import DatePicker from "react-datepicker";
//import "react-datepicker/src/stylesheets/datepicker.scss";
import { Space, TimePicker } from "antd";
import dayjs from "../../utils/day";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
//To be used as a form element only.

const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps }, ref) => {
  // const handleChange = (newDate) => {
  //   if (value !== newDate && onChange) {
  //     onChange(newDate);
  //   }
  // };

  return (
    <Space direction="vertical" style={{ width: "100%" }} id={id}>
      <FormDatePicker
        {...restProps}
        {...(onlyFuture && {
          disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d)
        })}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
        onlyFuture={onlyFuture}
        isDateOnly={false}
      />

      <TimePicker
        value={value ? dayjs(value) : null}
        {...(onlyFuture && {
          disabledDate: (d) => dayjs().isAfter(d)
        })}
        onChange={onChange}
        disableSeconds={true}
        minuteStep={15}
        onBlur={onBlur}
        format="hh:mm a"
        {...restProps}
      />
    </Space>
  );
};

export default forwardRef(DateTimePicker);