import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import { timestampToUTCDate, akEditorFloatingDialogZIndex, Popup } from '@uidu/editor-common';
import FieldDate from '@uidu/field-date';
import Form, { useForm } from '@uidu/form';
import { borderRadius, colors } from '@uidu/theme';
import { useState } from 'react';
import ReactDOM from 'react-dom';
import { D as withOuterListeners } from './main-d3eb8520.esm.js';
import { jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/assertThisInitialized';
import '@babel/runtime/helpers/inherits';
import '@babel/runtime/helpers/createSuper';
import '@babel/runtime/helpers/defineProperty';
import '@atlaskit/icon/glyph/chevron-down';
import '@atlaskit/icon/glyph/editor/align-center';
import '@atlaskit/icon/glyph/editor/align-left';
import '@atlaskit/icon/glyph/editor/align-right';
import 'styled-components';
import 'prosemirror-state';
import '@uidu/adf-schema';
import '@babel/runtime/helpers/toConsumableArray';
import './withAnalytics-08169d70.esm.js';
import './index-5bfbc632.esm.js';
import '@uidu/editor-json-transformer';
import 'prosemirror-commands';
import 'prosemirror-model';
import 'prosemirror-transform';
import 'prosemirror-utils';
import 'prosemirror-view';
import '@uidu/editor-common/selection';
import '@uidu/adf-utils';
import '@uidu/mentions';
import '@uidu/editor-common/utils';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/typeof';
import 'prosemirror-keymap';
import 'prosemirror-history';
import '@uidu/editor-common/safe-plugin';
import './index-f6954716.esm.js';
import 'prosemirror-tables';
import '@babel/runtime/helpers/createForOfIteratorHelper';
import '@uidu/analytics-listeners';
import 'prosemirror-inputrules';
import './ReactNodeView-100b47fb.esm.js';
import '@babel/runtime/helpers/get';
import '@babel/runtime/helpers/getPrototypeOf';
import 'w3c-keyname';
import '@atlaskit/icon/glyph/editor/text-style';
import 'react-intl';
import '@loadable/component';
import 'prop-types';
import '@uidu/date';
import '@uidu/emoji';
import '@uidu/emoji/element';
import '@atlaskit/icon/glyph/editor/edit';
import '@atlaskit/icon/glyph/editor/media-center';
import '@atlaskit/icon/glyph/editor/media-full-width';
import '@atlaskit/icon/glyph/editor/media-wide';
import '@atlaskit/icon/glyph/editor/remove';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@atlaskit/icon/glyph/editor/file';
import 'raf-schd';
import '@atlaskit/icon/glyph/cross-circle';
import '@atlaskit/icon/glyph/link';
import '@uidu/tooltip';
import '@atlaskit/icon/glyph/editor/layout-three-equal';
import '@atlaskit/icon/glyph/editor/layout-three-with-sidebars';
import '@atlaskit/icon/glyph/editor/layout-two-equal';
import '@atlaskit/icon/glyph/editor/layout-two-left-sidebar';
import '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
import 'uuid';
import '@uidu/analytics-gas-types';
import '@atlaskit/icon/glyph/editor/mention';
import '@atlaskit/icon/glyph/chevron-right-circle';
import '@atlaskit/icon/glyph/editor/add';
import '@atlaskit/icon/glyph/editor/code';
import '@atlaskit/icon/glyph/editor/date';
import '@atlaskit/icon/glyph/editor/decision';
import '@atlaskit/icon/glyph/editor/emoji';
import '@atlaskit/icon/glyph/editor/horizontal-rule';
import '@atlaskit/icon/glyph/editor/info';
import '@atlaskit/icon/glyph/editor/more';
import '@atlaskit/icon/glyph/editor/task';
import '@atlaskit/icon/glyph/media-services/text';
import '@atlaskit/icon/glyph/quote';
import '@atlaskit/icon/glyph/status';
import '@fortawesome/free-solid-svg-icons';
import '@fortawesome/react-fontawesome';
import '@uidu/emoji/picker';
import '@atlaskit/icon/glyph/editor/bullet-list';
import '@atlaskit/icon/glyph/editor/number-list';
import '@atlaskit/icon/glyph/editor/close';
import '@uidu/media-filmstrip';
import 'classnames';
import '@uidu/media-picker';
import 'assert';
import 'react-dom/client';
import '@atlaskit/icon/glyph/document-filled';
import '@uidu/media-card';
import 're-resizable';
import '@uidu/media-core';
import '@atlaskit/icon/glyph/chevron-left-large';
import '@uidu/analytics';
import '@uidu/button';
import '@atlaskit/icon/glyph/media-services/annotate';
import '@atlaskit/icon/glyph/editor/align-image-center';
import '@atlaskit/icon/glyph/editor/align-image-left';
import '@atlaskit/icon/glyph/editor/align-image-right';
import '@atlaskit/icon/glyph/editor/media-wrap-left';
import '@atlaskit/icon/glyph/editor/media-wrap-right';
import '@atlaskit/icon/glyph/editor/link';
import '@atlaskit/icon/glyph/shortcut';
import '@atlaskit/icon/glyph/editor/unlink';
import '@uidu/spinner';
import '@atlaskit/icon/glyph/editor/attachment';
import '@uidu/menu';
import '@uidu/status/element';
import '@uidu/status/picker';
import '@uidu/editor-common/ui-color';
import '@uidu/droplist';
import '@atlaskit/icon/glyph/editor/collapse';
import '@atlaskit/icon/glyph/editor/expand';
import 'prosemirror-schema-list';
import '@uidu/editor-markdown-transformer';
import 'linkify-it';
import 'markdown-it';
import '@atlaskit/icon/glyph/editor/background-color';
import '@babel/runtime/helpers/toArray';
import '@atlaskit/icon/base';
import 'get-video-id';

var PopupWithListeners = withOuterListeners(Popup);
var calendarStyle = {
  padding: borderRadius(),
  borderRadius: borderRadius(),
  boxShadow: "0 4px 8px -2px ".concat(colors.N60A, ", 0 0 1px ").concat(colors.N60A),
  backgroundColor: colors.N0
};
function DatePicker(props) {
  var element = props.element,
    closeDatePicker = props.closeDatePicker,
    onSelect = props.onSelect;
  var timestamp = element.getAttribute('timestamp');
  var _timestampToUTCDate = timestampToUTCDate(timestamp);
    _timestampToUTCDate.day;
    _timestampToUTCDate.month;
    _timestampToUTCDate.year;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var handleChange = function handleChange(_ref) {
    var day = _ref.day,
      month = _ref.month,
      year = _ref.year;
    setState({
      day: day,
      month: month,
      year: year
    });
  };
  var handleRef = function handleRef(ref) {
    var elm = ref && ReactDOM.findDOMNode(ref);
    if (elm) {
      elm.focus();
    }
  };
  var form = useForm({});
  if (!timestamp) {
    return null;
  }
  return /*#__PURE__*/jsx(PopupWithListeners, {
    target: element,
    offset: [0, 8],
    fitHeight: 327,
    fitWidth: 340,
    handleClickOutside: closeDatePicker,
    handleEscapeKeydown: closeDatePicker,
    zIndex: akEditorFloatingDialogZIndex,
    children: /*#__PURE__*/jsx(Form, {
      form: form,
      children: /*#__PURE__*/jsx(FieldDate, _objectSpread(_objectSpread({
        withCalendar: true,
        name: "date",
        onChange: handleChange,
        onSelect: onSelect
      }, state), {}, {
        ref: handleRef,
        innerProps: {
          style: calendarStyle
        }
      }))
    })
  });
}

export { DatePicker as default };
