import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useRef, useState, useEffect, useLayoutEffect } from 'react';
import cls from 'classnames';
import { CalendarContainerOverlay, LeftHelper, base } from './DateTimePicker.styles.js';
import { base as base$2 } from './variations/_size/base.js';
import { base as base$1 } from './variations/_view/base.js';
import { base as base$3 } from './variations/_hint-view/base.js';
import { base as base$4 } from './variations/_hint-size/base.js';
import { base as base$5 } from './variations/_tooltip-size/base.js';
import { base as base$6 } from './variations/_disabled/base.js';
import { base as base$7 } from './variations/_readonly/base.js';
import { classes } from './DateTimePicker.tokens.js';
import { useDateTimePicker } from './hooks/useDateTimePicker.js';
import { useKeyNavigation } from './hooks/useKeyboardNavigation.js';
import { useForkRef } from '../../hooks/useForkRef.js';
import { Popover } from './ui/Popover/Popover.js';
import { Input } from './ui/Input/Input.js';
import { CalendarGrid } from './ui/CalendarGrid/CalendarGrid.js';
import { StyledSeparator } from './ui/Popover/Popover.styles.js';
import { TimeGrid } from './ui/TimeGrid/TimeGrid.js';
import { DateShortcutList } from './ui/DateShortcut/DateShortcutList.js';

var _StyledSeparator;
var _excluded = ["className", "value", "defaultDate", "size", "view", "readOnly", "disabled", "appearance", "hasClearDivider", "opened", "placement", "offset", "frame", "zIndex", "closeOnOverlayClick", "closeOnEsc", "usePortal", "type", "lang", "dateFormat", "timeFormat", "dateTimeSeparator", "maskWithFormat", "min", "max", "renderFromDate", "includeEdgeDates", "isDouble", "dateOnTimeSelectOnly", "dateShortcuts", "dateShortcutsPlacement", "dateShortcutsWidth", "eventTooltipOptions", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "calendarContainerWidth", "calendarContainerHeight", "stretched", "label", "labelPlacement", "keepPlaceholder", "requiredPlacement", "required", "hasRequiredIndicator", "preserveInvalidOnBlur", "placeholder", "valueError", "valueSuccess", "valueEdited", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "autoComplete", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintTargetPlacement", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];

// changes to start tests
var dateTimePickerRoot = function dateTimePickerRoot(Root) {
  return /*#__PURE__*/forwardRef(function (_ref, ref) {
    var className = _ref.className,
      outerValue = _ref.value,
      _ref$defaultDate = _ref.defaultDate,
      defaultDate = _ref$defaultDate === void 0 ? '' : _ref$defaultDate,
      size = _ref.size,
      view = _ref.view,
      _ref$readOnly = _ref.readOnly,
      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      appearance = _ref.appearance,
      hasClearDivider = _ref.hasClearDivider,
      outerOpened = _ref.opened,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? ['top', 'bottom'] : _ref$placement,
      offset = _ref.offset,
      _ref$frame = _ref.frame,
      frame = _ref$frame === void 0 ? 'document' : _ref$frame,
      zIndex = _ref.zIndex,
      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
      _ref$closeOnEsc = _ref.closeOnEsc,
      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
      _ref$usePortal = _ref.usePortal,
      usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'Days' : _ref$type,
      _ref$lang = _ref.lang,
      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
      _ref$dateFormat = _ref.dateFormat,
      dateFormat = _ref$dateFormat === void 0 ? 'DD.MM.YYYY' : _ref$dateFormat,
      _ref$timeFormat = _ref.timeFormat,
      timeFormat = _ref$timeFormat === void 0 ? 'HH:mm:ss' : _ref$timeFormat,
      _ref$dateTimeSeparato = _ref.dateTimeSeparator,
      dateTimeSeparator = _ref$dateTimeSeparato === void 0 ? ' ' : _ref$dateTimeSeparato,
      maskWithFormat = _ref.maskWithFormat,
      min = _ref.min,
      max = _ref.max,
      renderFromDate = _ref.renderFromDate,
      includeEdgeDates = _ref.includeEdgeDates,
      isDouble = _ref.isDouble,
      dateOnTimeSelectOnly = _ref.dateOnTimeSelectOnly,
      dateShortcuts = _ref.dateShortcuts,
      _ref$dateShortcutsPla = _ref.dateShortcutsPlacement,
      dateShortcutsPlacement = _ref$dateShortcutsPla === void 0 ? 'left' : _ref$dateShortcutsPla,
      dateShortcutsWidth = _ref.dateShortcutsWidth,
      eventTooltipOptions = _ref.eventTooltipOptions,
      eventList = _ref.eventList,
      disabledList = _ref.disabledList,
      eventMonthList = _ref.eventMonthList,
      disabledMonthList = _ref.disabledMonthList,
      eventQuarterList = _ref.eventQuarterList,
      disabledQuarterList = _ref.disabledQuarterList,
      eventYearList = _ref.eventYearList,
      disabledYearList = _ref.disabledYearList,
      calendarContainerWidth = _ref.calendarContainerWidth,
      calendarContainerHeight = _ref.calendarContainerHeight,
      stretched = _ref.stretched,
      label = _ref.label,
      _ref$labelPlacement = _ref.labelPlacement,
      labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
      keepPlaceholder = _ref.keepPlaceholder,
      _ref$requiredPlacemen = _ref.requiredPlacement,
      requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? false : _ref$required,
      _ref$hasRequiredIndic = _ref.hasRequiredIndicator,
      hasRequiredIndicator = _ref$hasRequiredIndic === void 0 ? false : _ref$hasRequiredIndic,
      preserveInvalidOnBlur = _ref.preserveInvalidOnBlur,
      placeholder = _ref.placeholder,
      valueError = _ref.valueError,
      valueSuccess = _ref.valueSuccess,
      valueEdited = _ref.valueEdited,
      leftHelper = _ref.leftHelper,
      contentLeft = _ref.contentLeft,
      contentRight = _ref.contentRight,
      textBefore = _ref.textBefore,
      textAfter = _ref.textAfter,
      autoComplete = _ref.autoComplete,
      _ref$hintTrigger = _ref.hintTrigger,
      hintTrigger = _ref$hintTrigger === void 0 ? 'hover' : _ref$hintTrigger,
      hintText = _ref.hintText,
      _ref$hintView = _ref.hintView,
      hintView = _ref$hintView === void 0 ? 'default' : _ref$hintView,
      _ref$hintSize = _ref.hintSize,
      hintSize = _ref$hintSize === void 0 ? 'm' : _ref$hintSize,
      hintTargetIcon = _ref.hintTargetIcon,
      _ref$hintTargetPlacem = _ref.hintTargetPlacement,
      hintTargetPlacement = _ref$hintTargetPlacem === void 0 ? 'outer' : _ref$hintTargetPlacem,
      _ref$hintPlacement = _ref.hintPlacement,
      hintPlacement = _ref$hintPlacement === void 0 ? 'auto' : _ref$hintPlacement,
      hintHasArrow = _ref.hintHasArrow,
      _ref$hintOffset = _ref.hintOffset,
      hintOffset = _ref$hintOffset === void 0 ? [0, 0] : _ref$hintOffset,
      hintWidth = _ref.hintWidth,
      hintContentLeft = _ref.hintContentLeft,
      onChangeValue = _ref.onChangeValue,
      onCommitDate = _ref.onCommitDate,
      onToggle = _ref.onToggle,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      rest = _objectWithoutProperties(_ref, _excluded);
    var inputRef = useRef(null);
    var inputInnerRef = useForkRef(inputRef, ref);
    var calendarOverlayRef = useRef(null);
    var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isInnerOpen = _useState2[0],
      setIsInnerOpen = _useState2[1];
    var openedValue = outerOpened !== null && outerOpened !== void 0 ? outerOpened : isInnerOpen;
    var _useDateTimePicker = useDateTimePicker({
        inputRef: inputRef,
        outerValue: outerValue,
        valueError: valueError,
        valueSuccess: valueSuccess,
        valueEdited: valueEdited,
        type: type,
        lang: lang,
        disabled: disabled,
        readOnly: readOnly,
        maskWithFormat: maskWithFormat,
        dateTimeSeparator: dateTimeSeparator,
        dateFormat: dateFormat,
        timeFormat: timeFormat,
        max: max,
        min: min,
        includeEdgeDates: includeEdgeDates,
        dateOnTimeSelectOnly: dateOnTimeSelectOnly,
        onChangeValue: onChangeValue,
        onCommitDate: onCommitDate,
        onBlur: onBlur
      }),
      format = _useDateTimePicker.format,
      dateVisibleValue = _useDateTimePicker.dateVisibleValue,
      calendarGridValue = _useDateTimePicker.calendarGridValue,
      inputValue = _useDateTimePicker.inputValue,
      timeVisibleValue = _useDateTimePicker.timeVisibleValue,
      timeColumnsCount = _useDateTimePicker.timeColumnsCount,
      errorClass = _useDateTimePicker.errorClass,
      successClass = _useDateTimePicker.successClass,
      editedClass = _useDateTimePicker.editedClass,
      handleChangeValue = _useDateTimePicker.handleChangeValue,
      handleSearch = _useDateTimePicker.handleSearch,
      handleBlur = _useDateTimePicker.handleBlur,
      handleCalendarPick = _useDateTimePicker.handleCalendarPick,
      handleTimePick = _useDateTimePicker.handleTimePick,
      updateExternalDate = _useDateTimePicker.updateExternalDate,
      isDateEqualEdge = _useDateTimePicker.isDateEqualEdge;
    var handleCalendarOverlayClick = function handleCalendarOverlayClick(event) {
      if (disabled || readOnly) {
        return;
      }
      event.stopPropagation();
      if (isInnerOpen && stretched && event.target === (calendarOverlayRef === null || calendarOverlayRef === void 0 ? void 0 : calendarOverlayRef.current)) {
        setIsInnerOpen(false);
        if (onToggle) {
          onToggle(false, event);
        }
      }
    };
    var handleToggle = function handleToggle(innerOpened, event) {
      if (disabled || readOnly) {
        return;
      }
      var isCalendarOpen = (event === null || event === void 0 ? void 0 : event.target) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== 'Escape' ? true : innerOpened;
      if (onToggle) {
        onToggle(isCalendarOpen, event);
      }
      setIsInnerOpen(isCalendarOpen);
    };
    var _useKeyNavigation = useKeyNavigation({
        opened: isInnerOpen,
        closeOnEsc: closeOnEsc,
        onToggle: handleToggle
      }),
      onKeyDown = _useKeyNavigation.onKeyDown;
    useEffect(function () {
      if (disabled || readOnly) {
        setIsInnerOpen(false);
        if (onToggle) {
          onToggle(false);
        }
      }
    }, [disabled, readOnly]);
    useLayoutEffect(function () {
      if (!dateVisibleValue) {
        updateExternalDate(defaultDate);
      }
    }, [defaultDate, format, lang]);
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      view: view,
      size: size,
      className: cls(classes.root, className, _defineProperty({}, classes.stretched, stretched)),
      disabled: disabled,
      readOnly: !disabled && readOnly,
      eventTooltipSize: eventTooltipOptions === null || eventTooltipOptions === void 0 ? void 0 : eventTooltipOptions.size
    }, hintText && {
      hintView: hintView,
      hintSize: hintSize
    }), /*#__PURE__*/React__default.createElement(Popover, {
      target: /*#__PURE__*/React__default.createElement(Input, _extends({
        ref: inputInnerRef,
        className: cls(errorClass, successClass, editedClass),
        value: inputValue,
        size: size,
        label: label,
        labelPlacement: labelPlacement,
        keepPlaceholder: keepPlaceholder,
        requiredPlacement: requiredPlacement,
        required: required,
        hasRequiredIndicator: hasRequiredIndicator,
        preserveInvalidOnBlur: preserveInvalidOnBlur,
        placeholder: placeholder,
        valueError: valueError,
        valueSuccess: valueSuccess,
        valueEdited: valueEdited,
        contentLeft: contentLeft,
        contentRight: contentRight,
        textBefore: textBefore,
        textAfter: textAfter,
        autoComplete: autoComplete,
        readOnly: readOnly,
        disabled: disabled,
        hasClearDivider: appearance === 'clear' && hasClearDivider,
        onChange: handleChangeValue,
        onSearch: function onSearch(e) {
          var _e$currentTarget;
          return handleSearch(e === null || e === void 0 || (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
        },
        onFocus: onFocus,
        onBlur: handleBlur,
        onKeyDown: onKeyDown
      }, hintText ? {
        hintText: hintText,
        hintView: hintView,
        hintSize: hintSize,
        hintTrigger: hintTrigger,
        hintTargetIcon: hintTargetIcon,
        hintPlacement: hintPlacement,
        hintHasArrow: hintHasArrow,
        hintOffset: hintOffset,
        hintWidth: hintWidth,
        hintContentLeft: hintContentLeft,
        hintTargetPlacement: hintTargetPlacement
      } : {
        hintText: undefined
      }, rest)),
      opened: openedValue,
      usePortal: usePortal,
      frame: frame,
      offset: offset,
      placement: placement,
      closeOnOverlayClick: closeOnOverlayClick,
      closeOnEsc: closeOnEsc,
      zIndex: zIndex,
      calendarContainerWidth: calendarContainerWidth,
      calendarContainerHeight: calendarContainerHeight,
      onToggle: handleToggle
    }, /*#__PURE__*/React__default.createElement(CalendarContainerOverlay, {
      ref: calendarOverlayRef,
      onClick: handleCalendarOverlayClick
    }), /*#__PURE__*/React__default.createElement(Root, {
      view: view,
      size: size,
      className: cls(classes.root, className, _defineProperty({}, classes.stretched, stretched)),
      disabled: disabled,
      readOnly: !disabled && readOnly
    }, dateShortcuts !== null && dateShortcuts !== void 0 && dateShortcuts.length ? /*#__PURE__*/React__default.createElement(DateShortcutList, {
      items: dateShortcuts,
      setShortcutDate: handleCalendarPick,
      dateShortcutsWidth: dateShortcutsWidth,
      calendarContainerHeight: calendarContainerHeight,
      dateShortcutsPlacement: dateShortcutsPlacement
    }) : null, /*#__PURE__*/React__default.createElement(CalendarGrid, {
      value: calendarGridValue,
      isDouble: isDouble,
      calendarContainerWidth: calendarContainerWidth,
      calendarContainerHeight: calendarContainerHeight,
      type: type,
      eventTooltipOptions: eventTooltipOptions,
      eventList: eventList,
      disabledList: disabledList,
      eventMonthList: eventMonthList,
      disabledMonthList: disabledMonthList,
      eventQuarterList: eventQuarterList,
      disabledQuarterList: disabledQuarterList,
      eventYearList: eventYearList,
      disabledYearList: disabledYearList,
      min: min,
      max: max,
      renderFromDate: renderFromDate,
      includeEdgeDates: includeEdgeDates,
      lang: lang,
      handleCalendarPick: handleCalendarPick
    }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/React__default.createElement(StyledSeparator, null)), /*#__PURE__*/React__default.createElement(TimeGrid, _extends({
      value: timeVisibleValue,
      format: timeFormat,
      columns: timeColumnsCount,
      calendarContainerWidth: calendarContainerWidth,
      calendarContainerHeight: calendarContainerHeight,
      dropdownHeight: calendarContainerHeight,
      onChange: handleTimePick
    }, isDateEqualEdge(min) && {
      min: min
    }, isDateEqualEdge(max) && {
      max: max
    })))), leftHelper && /*#__PURE__*/React__default.createElement(LeftHelper, {
      className: cls(errorClass, successClass, editedClass)
    }, leftHelper));
  });
};
var dateTimePickerConfig = {
  name: 'DateTimePicker',
  tag: 'div',
  layout: dateTimePickerRoot,
  base: base,
  variations: {
    view: {
      css: base$1
    },
    size: {
      css: base$2
    },
    hintView: {
      css: base$3
    },
    hintSize: {
      css: base$4
    },
    eventTooltipSize: {
      css: base$5
    },
    disabled: {
      css: base$6,
      attrs: true
    },
    readOnly: {
      css: base$7,
      attrs: true
    }
  },
  defaults: {
    size: 'm',
    view: 'default',
    hintView: 'default',
    hintSize: 'm'
  }
};

export { dateTimePickerConfig, dateTimePickerRoot };
