"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.DateRangePicker = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _useWindowFlipPopoverProps = require("../../utils/useWindowFlipPopoverProps");
var _PatternsThemeProvider = require("../../themes/PatternsThemeProvider");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/DateRangePicker/DateRangePicker.tsx";
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); }
function _DateRangePicker(props) {
  const {
    state,
    dataHook,
    popoverProps,
    ...rest
  } = props;
  const {
    translate: t,
    filterByTime
  } = state;
  const datePickerFrom = (0, _react.useRef)(null);
  const datePickerTo = (0, _react.useRef)(null);
  const {
    windowFlipPopoverProps
  } = (0, _useWindowFlipPopoverProps.useWindowFlipPopoverProps)({
    popoverProps
  });
  const {
    rangePicker
  } = (0, _PatternsThemeProvider.usePatternsTheme)();
  const commonInputProps = {
    size: rangePicker.size
  };
  const commonDatePickerProps = {
    ...commonInputProps,
    shouldCloseOnSelect: true,
    dateStyle: 'medium',
    width: filterByTime ? '100%' : rangePicker.width,
    zIndex: rangePicker.zIndex
  };
  const commonTimeInputProps = {
    ...commonInputProps,
    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.IconAffix, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 47,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.TimeSmall, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 48,
        columnNumber: 9
      }
    })),
    popoverProps: windowFlipPopoverProps
  };
  const filterDateFrom = (0, _react.useMemo)(() => date => state.filterDateFrom(date), [state.to]);
  const filterDateTo = (0, _react.useMemo)(() => date => state.filterDateTo(date), [state.from]);
  const filterDateTimeFrom = (0, _react.useMemo)(() => date => state.filterDateTimeFrom(date), [state.to, state.from, state.isToTimeSet]);
  const filterDateTimeTo = (0, _react.useMemo)(() => date => state.filterDateTimeTo(date), [state.from, state.to, state.isFromTimeSet]);
  const fromPicker = /*#__PURE__*/_react.default.createElement(_designSystem.DatePicker, (0, _extends2.default)({
    ref: datePickerFrom,
    placeholderText: t('cairo.filtersPanel.date.title'),
    onChange: from => state.onFromSelected(from),
    value: state.from ?? undefined,
    filterDate: filterDateFrom,
    onClose: () => state.onFromClosed(),
    dataHook: "date-range-picker-from",
    popoverProps: {
      ...windowFlipPopoverProps,
      placement: 'bottom-start'
    },
    clearButton: true,
    inputProps: {
      clearButtonAriaLabel: t('cairo.filtersPanel.date.from.clearButton.ariaLabel')
    },
    onClear: () => state.onFromSelected(null)
  }, rest, commonDatePickerProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 5
    }
  }));
  const toPicker = /*#__PURE__*/_react.default.createElement(_designSystem.DatePicker, (0, _extends2.default)({
    ref: datePickerTo,
    placeholderText: t('cairo.filtersPanel.date.title'),
    onChange: to => state.onToSelected(to),
    value: state.to ?? undefined,
    filterDate: filterDateTo,
    onClose: () => state.onToClosed(),
    dataHook: "date-range-picker-to",
    popoverProps: {
      ...windowFlipPopoverProps,
      placement: 'bottom-end'
    },
    clearButton: true,
    inputProps: {
      clearButtonAriaLabel: t('cairo.filtersPanel.date.to.clearButton.ariaLabel')
    },
    onClear: () => state.onToSelected(null)
  }, rest, commonDatePickerProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 5
    }
  }));
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: filterByTime ? 'vertical' : 'horizontal',
    gap: "SP2",
    dataHook: dataHook,
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 123,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP1",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 129,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 130,
      columnNumber: 9
    }
  }, t('cairo.filtersPanel.date.from.placeholder')), filterByTime ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "SP2",
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    flex: 1,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 135,
      columnNumber: 13
    }
  }, fromPicker), /*#__PURE__*/_react.default.createElement(_designSystem.TimeInput, (0, _extends2.default)({
    dataHook: "date-range-picker-time-from",
    placeholder: t('cairo.filtersPanel.time.title'),
    value: state.isFromTimeSet ? state.from : null,
    onChange: ({
      date
    }) => state.onFromTimeSelected(date),
    disabled: !state.from,
    filterTime: filterDateTimeFrom,
    size: "small"
  }, commonTimeInputProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 13
    }
  }))) : fromPicker), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP1",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 152,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 153,
      columnNumber: 9
    }
  }, t('cairo.filtersPanel.date.to.placeholder')), filterByTime ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "SP2",
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 155,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    flex: 1,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 156,
      columnNumber: 13
    }
  }, toPicker), /*#__PURE__*/_react.default.createElement(_designSystem.TimeInput, (0, _extends2.default)({
    dataHook: "date-range-picker-time-to",
    placeholder: t('cairo.filtersPanel.time.title'),
    value: state.isToTimeSet ? state.to : null,
    onChange: ({
      date
    }) => state.onToTimeSelected(date),
    disabled: !state.to,
    filterTime: filterDateTimeTo
  }, commonTimeInputProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 157,
      columnNumber: 13
    }
  }))) : toPicker));
}
const DateRangePicker = exports.DateRangePicker = (0, _mobxReactLite.observer)(_DateRangePicker);
//# sourceMappingURL=DateRangePicker.js.map