"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _faArrowRight = require("@fortawesome/free-solid-svg-icons/faArrowRight");
var _faCalendar = require("@fortawesome/free-regular-svg-icons/faCalendar");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _input = require("../input");
var _datetimeRangePickerPanel = require("./datetime-range-picker-panel");
var _constants = require("../form-field/constants");
var _hooks = require("../hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const DateRangePickerInput = /*#__PURE__*/(0, _react.forwardRef)(({
  onClick,
  start,
  end,
  dateFormat,
  timeFormat,
  showTimeZoneSuffix,
  isDisabled,
  labelFormat,
  utcSuffix,
  dateStartInputAriaLabel,
  dateEndInputAriaLabel
}, ref) => {
  const handleClick = (0, _react.useCallback)(e => {
    onClick({
      originalEvent: e
    });
  }, [onClick]);
  const handleKeyDown = (0, _react.useCallback)(e => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    onClick({
      originalEvent: e,
      openedWithKeyboard: true
    });
  }, [onClick]);
  const attrs = (0, _hooks.useNonNativeButtonAttrs)({
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    isDisabled
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "date-range-picker-input",
    "test-id": "date-range-picker-input",
    ...attrs,
    ref: ref,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InputWrapper, {
      datetime: start,
      dateFormat: labelFormat || dateFormat,
      timeFormat: timeFormat,
      showTimeZoneSuffix: showTimeZoneSuffix,
      testId: "date-range-picker-input-start",
      isDisabled: isDisabled,
      utcSuffix: utcSuffix,
      onClick: e => {
        e.stopPropagation(); // prevent actual input from being focused
        onClick({
          originalEvent: e,
          targetInput: _datetimeRangePickerPanel.DATE_RANGE_INPUT_TYPES.START
        });
      },
      ariaLabel: dateStartInputAriaLabel
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
      icon: _faArrowRight.faArrowRight,
      className: "date-range-picker-arrow-icon"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InputWrapper, {
      datetime: end,
      dateFormat: labelFormat || dateFormat,
      timeFormat: timeFormat,
      showTimeZoneSuffix: showTimeZoneSuffix,
      testId: "date-range-picker-input-end",
      isDisabled: isDisabled,
      utcSuffix: utcSuffix,
      onClick: e => {
        e.stopPropagation(); // prevent actual input from being focused
        onClick({
          originalEvent: e,
          targetInput: _datetimeRangePickerPanel.DATE_RANGE_INPUT_TYPES.END
        });
      },
      ariaLabel: dateEndInputAriaLabel
    })]
  });
});
DateRangePickerInput.displayName = 'DateRangePickerInput';
var _default = exports.default = DateRangePickerInput;
function InputWrapper({
  datetime,
  dateFormat,
  timeFormat,
  showTimeZoneSuffix,
  testId,
  isDisabled,
  utcSuffix,
  onClick,
  ariaLabel
}) {
  const value = [...(dateFormat ? [datetime.format(dateFormat)] : []), ...(timeFormat ? [showTimeZoneSuffix ? `${datetime.format(timeFormat)} ${utcSuffix}` : datetime.format(timeFormat)] : [])].join(' ');
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
    (0, _jsxRuntime.jsx)("div", {
      className: "datetime-picker-input",
      "test-id": testId,
      onClick: onClick,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
        type: _constants.INPUT_TYPES.TEXT,
        value: value,
        isDisabled: isDisabled,
        rightIcon: _faCalendar.faCalendar,
        placeholder: `${dateFormat} ${timeFormat || ''}`,
        "aria-label": ariaLabel
      })
    })
  );
}