"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _dateFns = require("date-fns");

var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));

var _componentHeader = _interopRequireDefault(require("./component-header"));

var _componentLabel = _interopRequireDefault(require("./component-label"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class DatePicker extends _react.default.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "handleChange", dt => {
      let placeholder;
      const {
        formatMask
      } = this.state;

      if (dt && dt.target) {
        placeholder = dt && dt.target && dt.target.value === '' ? formatMask.toLowerCase() : '';
        const formattedDate = dt.target.value ? (0, _dateFns.format)(dt.target.value, formatMask) : '';
        this.setState({
          value: formattedDate,
          internalValue: formattedDate,
          placeholder
        });
      } else {
        this.setState({
          value: dt ? (0, _dateFns.format)(dt, formatMask) : '',
          internalValue: dt,
          placeholder
        });
      }
    });

    this.inputField = /*#__PURE__*/_react.default.createRef();
    const {
      formatMask: _formatMask
    } = DatePicker.updateFormat(props, null);
    this.state = DatePicker.updateDateTime(props, {
      formatMask: _formatMask
    }, _formatMask);
  } // formatMask = '';


  static updateFormat(props, oldFormatMask) {
    const {
      showTimeSelect,
      showTimeSelectOnly
    } = props.data;
    const dateFormat = showTimeSelect && showTimeSelectOnly ? '' : props.data.dateFormat;
    const timeFormat = showTimeSelect ? props.data.timeFormat : '';
    const formatMask = `${dateFormat} ${timeFormat}`.trim();
    const updated = formatMask !== oldFormatMask;
    return {
      updated,
      formatMask
    };
  }

  static updateDateTime(props, state, formatMask) {
    let value;
    let internalValue;
    const {
      defaultToday
    } = props.data;

    if (defaultToday && (props.defaultValue === '' || props.defaultValue === undefined)) {
      value = (0, _dateFns.format)(new Date(), formatMask);
      internalValue = new Date();
    } else {
      value = props.defaultValue;

      if (value === '' || value === undefined) {
        internalValue = undefined;
      } else {
        internalValue = (0, _dateFns.parse)(value, state.formatMask, new Date());
      }
    }

    return {
      value,
      internalValue,
      placeholder: formatMask.toLowerCase(),
      defaultToday,
      formatMask: state.formatMask
    };
  } // componentWillReceiveProps(props) {
  //   const formatUpdated = this.updateFormat(props);
  //   if ((props.data.defaultToday !== !this.state.defaultToday) || formatUpdated) {
  //     const state = this.updateDateTime(props, this.formatMask);
  //     this.setState(state);
  //   }
  // }


  static getDerivedStateFromProps(props, state) {
    const {
      updated,
      formatMask
    } = DatePicker.updateFormat(props, state.formatMask);

    if (props.data.defaultToday !== state.defaultToday || updated) {
      const newState = DatePicker.updateDateTime(props, state, formatMask);
      return newState;
    }

    return null;
  }

  render() {
    const {
      showTimeSelect,
      showTimeSelectOnly
    } = this.props.data;
    const props = {};
    props.type = 'date';
    props.className = 'form-control';
    props.name = this.props.data.field_name;
    const readOnly = this.props.data.readOnly || this.props.read_only;
    const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const placeholderText = this.state.formatMask.toLowerCase();

    if (this.props.mutable) {
      props.defaultValue = this.props.defaultValue;
      props.ref = this.inputField;
    }

    let baseClasses = 'SortableItem rfb-item';

    if (this.props.data.pageBreakBefore) {
      baseClasses += ' alwaysbreak';
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", null, readOnly && /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      name: props.name,
      ref: props.ref,
      readOnly: readOnly,
      placeholder: this.state.placeholder,
      value: this.state.value,
      className: "form-control"
    }), iOS && !readOnly && /*#__PURE__*/_react.default.createElement("input", {
      type: "date",
      name: props.name,
      ref: props.ref,
      onChange: this.handleChange,
      dateFormat: "MM/DD/YYYY",
      placeholder: this.state.placeholder,
      value: this.state.value,
      className: "form-control"
    }), !iOS && !readOnly && /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
      name: props.name,
      ref: props.ref,
      onChange: this.handleChange,
      selected: this.state.internalValue,
      todayButton: 'Today',
      className: "form-control",
      isClearable: true,
      showTimeSelect: showTimeSelect,
      showTimeSelectOnly: showTimeSelectOnly,
      dateFormat: this.state.formatMask,
      portalId: "root-portal",
      autoComplete: "off",
      placeholderText: placeholderText
    }))));
  }

}

var _default = DatePicker;
exports.default = _default;