"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react2 = require("@emotion/react");
var _dayjs = _interopRequireDefault(require("dayjs"));
var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
var _decapCmsUiDefault = require("decap-cms-ui-default");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /** @jsx jsx */
_dayjs.default.extend(_customParseFormat.default);
_dayjs.default.extend(_localizedFormat.default);
_dayjs.default.extend(_utc.default);
var _ref3 = process.env.NODE_ENV === "production" ? {
  name: "1tfa1p6-Buttons",
  styles: "display:flex;gap:20px;width:fit-content;label:Buttons;"
} : {
  name: "1tfa1p6-Buttons",
  styles: "display:flex;gap:20px;width:fit-content;label:Buttons;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 7804 characters] */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
function Buttons({
  t,
  handleChange,
  getNow
}) {
  return (0, _react2.jsx)("div", {
    css: _ref3
  }, (0, _react2.jsx)("button", {
    css: /*#__PURE__*/(0, _react2.css)(_decapCmsUiDefault.buttons.button, " ", _decapCmsUiDefault.buttons.widget, ";;label:Buttons;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 7808 characters] */")),
    onClick: () => handleChange(getNow()),
    "data-testid": "now-button"
  }, t('editor.editorWidgets.datetime.now')), (0, _react2.jsx)("button", {
    css: /*#__PURE__*/(0, _react2.css)(_decapCmsUiDefault.buttons.button, " ", _decapCmsUiDefault.buttons.widget, ";;label:Buttons;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 7808 characters] */")),
    onClick: () => handleChange(''),
    "data-testid": "clear-button"
  }, t('editor.editorWidgets.datetime.clear')));
}
var _ref = process.env.NODE_ENV === "production" ? {
  name: "1mn76l5-DateTimeControl",
  styles: "font-size:0.8em;color:#666;label:DateTimeControl;"
} : {
  name: "1mn76l5-DateTimeControl",
  styles: "font-size:0.8em;color:#666;label:DateTimeControl;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 7808 characters] */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = process.env.NODE_ENV === "production" ? {
  name: "ptu1mf-DateTimeControl",
  styles: "display:flex!important;gap:20px;align-items:center;label:DateTimeControl;"
} : {
  name: "ptu1mf-DateTimeControl",
  styles: "display:flex!important;gap:20px;align-items:center;label:DateTimeControl;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 7808 characters] */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
class DateTimeControl extends _react.default.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "isUtc", this.props.field.get('picker_utc') || false);
    _defineProperty(this, "isValidDate", dt => (0, _dayjs.default)(dt, this.getFormat().inputFormat).isValid() || dt === '');
    _defineProperty(this, "handleChange", datetime => {
      if (!this.isValidDate(datetime)) return;
      const {
        onChange
      } = this.props;
      if (datetime === '') {
        onChange('');
      } else {
        const {
          format,
          inputFormat
        } = this.getFormat();
        const formattedValue = (0, _dayjs.default)(datetime, inputFormat).format(format);
        onChange(formattedValue);
      }
    });
    _defineProperty(this, "onInputChange", e => {
      const etv = e.target.value;
      this.handleChange(etv);
    });
  }
  componentDidMount() {
    const {
      value
    } = this.props;
    if (value === '{{now}}') {
      this.handleChange(this.getNow());
    }
  }
  escapeZ(str) {
    if (/Z(?![\]])/.test(str)) {
      return str.replace('Z', '[Z]');
    }
    return str;
  }
  getFormat() {
    const {
      field
    } = this.props;
    let inputType = 'datetime-local';
    let inputFormat = 'YYYY-MM-DDTHH:mm';
    let format = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
    let userFormat = field === null || field === void 0 ? void 0 : field.get('format');
    let dateFormat = field === null || field === void 0 ? void 0 : field.get('date_format');
    let timeFormat = field === null || field === void 0 ? void 0 : field.get('time_format');
    if (dateFormat === true) dateFormat = 'YYYY-MM-DD';
    if (timeFormat === true) timeFormat = 'HH:mm';
    if (this.isUtc) {
      userFormat = this.escapeZ(userFormat);
      dateFormat = this.escapeZ(dateFormat);
      timeFormat = this.escapeZ(timeFormat);
    }
    if (typeof dateFormat === 'string' && typeof timeFormat === 'string') {
      format = `${dateFormat}T${timeFormat}`;
    } else if (typeof timeFormat === 'string') {
      inputType = 'time';
      format = timeFormat;
    } else if (typeof dateFormat === 'string') {
      inputType = 'date';
      format = dateFormat;
    }
    if (typeof userFormat === 'string') {
      format = userFormat;
      inputType = 'datetime-local';
    }
    if (dateFormat === false) inputType = 'time';
    if (timeFormat === false) inputType = 'date';
    if (inputType === 'datetime-local') inputFormat = 'YYYY-MM-DDTHH:mm';
    if (inputType === 'date') inputFormat = 'YYYY-MM-DD';
    if (inputType === 'time') inputFormat = 'HH:mm';
    return {
      format,
      inputType,
      inputFormat
    };
  }
  getNow() {
    const {
      inputFormat
    } = this.getFormat();
    return this.isUtc ? _dayjs.default.utc().format(inputFormat) : (0, _dayjs.default)().format(inputFormat);
  }
  formatInputValue(value) {
    if (value === '') return value;
    const {
      format,
      inputFormat
    } = this.getFormat();
    const inputValue = this.isUtc ? _dayjs.default.utc(value, format).format(inputFormat) : (0, _dayjs.default)(value, format).format(inputFormat);
    if (this.isValidDate(inputValue)) {
      return inputValue;
    }
    return this.isUtc ? _dayjs.default.utc(value).format(inputFormat) : (0, _dayjs.default)(value).format(inputFormat);
  }
  render() {
    const {
      forID,
      value,
      classNameWrapper,
      setActiveStyle,
      setInactiveStyle,
      t,
      isDisabled
    } = this.props;
    const {
      inputType
    } = this.getFormat();
    return (0, _react2.jsx)("div", {
      className: classNameWrapper,
      css: _ref2
    }, (0, _react2.jsx)("input", {
      id: forID,
      "data-testid": forID,
      type: inputType,
      value: value ? this.formatInputValue(value) : '',
      onChange: this.onInputChange,
      onFocus: setActiveStyle,
      onBlur: setInactiveStyle,
      disabled: isDisabled
    }), this.isUtc && (0, _react2.jsx)("span", {
      css: _ref
    }, "UTC"), !isDisabled && (0, _react2.jsx)(Buttons, {
      t: t,
      handleChange: v => this.handleChange(v),
      getNow: () => this.getNow()
    }));
  }
}
_defineProperty(DateTimeControl, "propTypes", {
  field: _propTypes.default.object.isRequired,
  forID: _propTypes.default.string,
  onChange: _propTypes.default.func.isRequired,
  classNameWrapper: _propTypes.default.string.isRequired,
  setActiveStyle: _propTypes.default.func.isRequired,
  setInactiveStyle: _propTypes.default.func.isRequired,
  value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
  t: _propTypes.default.func.isRequired,
  isDisabled: _propTypes.default.bool
});
_defineProperty(DateTimeControl, "defaultProps", {
  isDisabled: false
});
var _default = exports.default = DateTimeControl;