import { DatePicker } from "antd";
import moment from "moment";
import React, { useRef } from "react";
//To be used as a form element only.

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);

const dateFormat = "MM/DD/YYYY";

export function FormDatePicker({
  bodyshop,
  value,
  onChange,
  onBlur,
  onlyFuture,
  isDateOnly = true,
  ...restProps
}) {
  const ref = useRef();

  const handleChange = (newDate) => {
    if (value !== newDate && onChange) {
      onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
    }
  };

  const handleKeyDown = (e) => {
    if (e.key.toLowerCase() === "t") {
      if (onChange) {
        onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
        // if (ref.current && ref.current.blur) ref.current.blur();
      }
    } else if (e.key.toLowerCase() === "enter") {
      if (ref.current && ref.current.blur) ref.current.blur();
    }
  };

  const handleBlur = (e) => {
    const v = e.target.value;
    if (!v) return;

    const _a = moment(
      v,
      ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
      "en",
      false
    );

    if (_a.isValid() && value && value.isValid && value.isValid()) {
      _a.set({
        hours: value.hours(),
        minutes: value.minutes(),
        seconds: value.seconds(),
        milliseconds: value.milliseconds(),
      });
    }

    if (_a.isValid() && onChange) {
      if (onlyFuture) {
        if (moment().subtract(1, "day").isBefore(_a)) {
          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
        } else {
          onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
        }
      } else {
        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
      }
    }
  };

  return (
    <div onKeyDown={handleKeyDown}>
      <DatePicker
        ref={ref}
        value={value ? moment(value) : null}
        onChange={handleChange}
        format={dateFormat}
        onBlur={onBlur || handleBlur}
        showToday={false}
        disabledTime
        {...(onlyFuture && {
          disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
        })}
        {...restProps}
      />
    </div>
  );
}