"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _box = _interopRequireWildcard(require("../box"));

var _ = _interopRequireDefault(require("."));

var _icon = _interopRequireDefault(require("../icon"));

var _input = _interopRequireDefault(require("../input"));

var _popover = _interopRequireDefault(require("../popover"));

var _classnames = _interopRequireDefault(require("classnames"));

var _theme = _interopRequireDefault(require("./theme.css"));

var _localeUtils = require("./localeUtils");

var _uiIcons = require("@teamleader/ui-icons");

var _excluded = ["className", "dayPickerProps", "footer", "inverse", "inputProps", "locale", "popoverProps", "size", "inputSize", "datePickerSize", "formatDate", "openPickerOnFocus", "onChange", "onBlur"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var DatePickerInput = function DatePickerInput(_ref) {
  var className = _ref.className,
      dayPickerProps = _ref.dayPickerProps,
      footer = _ref.footer,
      _ref$inverse = _ref.inverse,
      inverse = _ref$inverse === void 0 ? false : _ref$inverse,
      inputProps = _ref.inputProps,
      _ref$locale = _ref.locale,
      locale = _ref$locale === void 0 ? 'en-GB' : _ref$locale,
      popoverProps = _ref.popoverProps,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      inputSize = _ref.inputSize,
      datePickerSize = _ref.datePickerSize,
      customFormatDate = _ref.formatDate,
      _ref$openPickerOnFocu = _ref.openPickerOnFocus,
      openPickerOnFocus = _ref$openPickerOnFocu === void 0 ? true : _ref$openPickerOnFocu,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isPopoverActive = _useState2[0],
      setIsPopoverActive = _useState2[1];

  var _useState3 = (0, _react.useState)(null),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      popoverAnchorEl = _useState4[0],
      setPopoverAnchorEl = _useState4[1];

  var _useState5 = (0, _react.useState)(others.selectedDate),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      selectedDate = _useState6[0],
      setSelectedDate = _useState6[1];

  var getFormattedDate = function getFormattedDate() {
    if (!selectedDate) {
      return '';
    }

    if (!customFormatDate) {
      return (0, _localeUtils.formatDate)(selectedDate, locale);
    }

    return customFormatDate(selectedDate, locale);
  };

  var handleInputFocus = function handleInputFocus(event) {
    if (inputProps !== null && inputProps !== void 0 && inputProps.readOnly) {
      return;
    }

    if (openPickerOnFocus) {
      setPopoverAnchorEl(event.currentTarget);
      setIsPopoverActive(true);
      (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) && inputProps.onFocus(event);
    } else {
      (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) && inputProps.onFocus(event);
    }
  };

  var handleInputClick = function handleInputClick(event) {
    if (!openPickerOnFocus) {
      setPopoverAnchorEl(event.currentTarget);
      setIsPopoverActive(true);
      (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) && inputProps.onFocus(event);
    }

    (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) && inputProps.onClick(event);
  };

  var handlePopoverClose = function handlePopoverClose() {
    onBlur && onBlur();
    setIsPopoverActive(false);
  };

  var handleDatePickerDateChange = function handleDatePickerDateChange(date) {
    setIsPopoverActive(false);
    setSelectedDate(date);
    onChange && onChange(date);
  };

  var renderIcon = function renderIcon() {
    return /*#__PURE__*/_react.default.createElement(_icon.default, {
      color: inverse ? 'teal' : 'neutral',
      tint: inverse ? 'light' : 'darkest',
      marginRight: 2
    }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCalendarSmallOutline, null));
  };

  var boxProps = (0, _box.pickBoxProps)(others);
  var datePickerClassNames = (0, _classnames.default)(_theme.default['date-picker-input'], _theme.default["is-".concat(datePickerSize || size)]);
  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
    className: className
  }, boxProps), /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
    inverse: inverse,
    prefix: renderIcon(),
    size: inputSize || size,
    value: getFormattedDate(),
    width: "120px",
    noInputStyling: dayPickerProps && dayPickerProps.withMonthPicker
  }, inputProps, {
    onClick: handleInputClick,
    onFocus: handleInputFocus
  })), /*#__PURE__*/_react.default.createElement(_popover.default, (0, _extends2.default)({
    active: isPopoverActive,
    anchorEl: popoverAnchorEl,
    backdrop: "transparent",
    maxWidth: "min-content",
    onEscKeyDown: handlePopoverClose,
    onOverlayClick: handlePopoverClose,
    position: "end",
    offsetCorrection: 30,
    returnFocusToSource: false
  }, popoverProps), /*#__PURE__*/_react.default.createElement(_box.default, {
    overflowY: "auto"
  }, /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({
    className: datePickerClassNames,
    onChange: handleDatePickerDateChange,
    selectedDate: selectedDate,
    size: datePickerSize || size
  }, dayPickerProps))), footer && /*#__PURE__*/_react.default.createElement(_box.default, {
    backgroundColor: "neutral",
    backgroundTint: "light",
    borderColor: "neutral",
    borderTint: "normal",
    borderTopWidth: 1,
    flex: "1 0 auto",
    overflowX: "hidden",
    paddingHorizontal: 3,
    paddingVertical: 3,
    tabIndex: 0
  }, footer)));
};

var _default = DatePickerInput;
exports.default = _default;