import { DatePicker } from "antd";
import dayjs from "../../utils/day";
import React, { useRef } from "react";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  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,
  onlyToday,
  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 ? dayjs().format("YYYY-MM-DD") : dayjs());
      }
    } 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 formats = [
      "MMDDYY",
      "MMDDYYYY",
      "MM/DD/YY",
      "MM/DD/YYYY",
      "M/DD/YY",
      "M/DD/YYYY",
      "MM/D/YY",
      "MM/D/YYYY",
      "M/D/YY",
      "M/D/YYYY",
      "D/MM/YY",
      "D/MM/YYYY",
      "DD/M/YY",
      "DD/M/YYYY",
      "D/M/YY",
      "D/M/YYYY"
    ];

    let _a;

    // Iterate through formats to find the correct one
    for (let format of formats) {
      _a = dayjs(v, format);
      if (v === _a.format(format)) {
        break;
      }
    }

    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 (dayjs().subtract(1, "day").isBefore(_a)) {
          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
        } else {
          onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
        }
      } else {
        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
      }
    }
  };

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