import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "dayPickerProps", "footer", "inverse", "inputProps", "locale", "popoverProps", "size", "inputSize", "datePickerSize", "formatDate", "openPickerOnFocus", "onChange", "onBlur"];
import React, { useState } from 'react';
import Box, { pickBoxProps } from '../box';
import DatePicker from '.';
import Icon from '../icon';
import Input from '../input';
import Popover from '../popover';
import cx from 'classnames';
import theme from './theme.css';
import { formatDate } from './localeUtils';
import { IconCalendarSmallOutline } from '@teamleader/ui-icons';

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 = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isPopoverActive = _useState2[0],
      setIsPopoverActive = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      popoverAnchorEl = _useState4[0],
      setPopoverAnchorEl = _useState4[1];

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

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

    if (!customFormatDate) {
      return 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.createElement(Icon, {
      color: inverse ? 'teal' : 'neutral',
      tint: inverse ? 'light' : 'darkest',
      marginRight: 2
    }, /*#__PURE__*/React.createElement(IconCalendarSmallOutline, null));
  };

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

export default DatePickerInput;