import React from 'react';
import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
import { Input } from '../input';
import { Tooltip, TOOLTIP_DELAY_TYPES, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { Button, ACCENT_TYPES } from '../button';
import { INPUT_TYPES, getErrorAriaAttributes, useDefaultValidationValues } from '../form-field';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** Represents the datetime text input, timezone, and reset button along the top of a single calendar */
function DateRangeSingleDatePickerInput(renderProps) {
  // The 3rd party react-datetime component known as `Datetime` does not filter out the props that it
  // receives to only those that <input /> tags accept. Because of this, renderProps contains
  // a mix of props that SHOULD be passed down to our <Input /> component with props that should NOT
  // be passed down.
  // Therefore, we must split renderProps up into two objects, one representing those props that should
  // be passed on to <Input /> and one representing props that are used only locally in this component.
  const locallySpecificPropKeys = ['resetEnabled', 'onReset', 'resetButtonTestId', 'autoFocus', 'resetText', 'utcSuffix', 'dateFormat', 'timeFormat'];
  const validationValues = useDefaultValidationValues();
  const [inputProps, locallySpecificProps] = Object.keys(renderProps).reduce((acc, propName) => {
    if (locallySpecificPropKeys.includes(propName)) {
      acc[1][propName] = renderProps[propName];
    } else {
      acc[0][propName] = renderProps[propName];
    }
    return acc;
  }, [{}, {}]);
  const {
    resetEnabled,
    onReset,
    resetButtonTestId,
    autoFocus
  } = locallySpecificProps;
  const resetHelperText = resetEnabled ? renderProps.resetText : '';
  const ariaAttrs = getErrorAriaAttributes({
    validity: inputProps.validity,
    validationValues,
    id: inputProps.fieldTestId
  });
  return /*#__PURE__*/_jsxs("div", {
    className: "datetime-range-picker-input",
    children: [/*#__PURE__*/_jsx(Input, {
      ...inputProps,
      type: INPUT_TYPES.TEXT,
      autoFocus: autoFocus,
      placeholder: `${renderProps.dateFormat} ${renderProps.timeFormat || ''}`,
      "aria-label": renderProps.ariaLabel,
      ...ariaAttrs
    }), /*#__PURE__*/_jsx("span", {
      className: "timezone-label",
      children: renderProps.utcSuffix
    }), /*#__PURE__*/_jsx(Tooltip, {
      content: resetHelperText,
      placement: TOOLTIP_PLACEMENT_TYPES.TOP,
      delayType: TOOLTIP_DELAY_TYPES.NONE,
      children: /*#__PURE__*/_jsx(Button, {
        accentType: ACCENT_TYPES.COMMAND,
        className: "reset-datetime-value",
        isDisabled: !resetEnabled,
        onClick: onReset,
        "aria-label": renderProps.resetText,
        testId: resetButtonTestId,
        rightIcon: faRotateLeft
      })
    })]
  });
}
export default DateRangeSingleDatePickerInput;