import React, { forwardRef, useCallback } from 'react';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Input } from '../input';
import { DATE_RANGE_INPUT_TYPES } from './datetime-range-picker-panel';
import { INPUT_TYPES } from '../form-field/constants';
import { useNonNativeButtonAttrs } from '../hooks';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DateRangePickerInput = /*#__PURE__*/forwardRef(({
  onClick,
  start,
  end,
  dateFormat,
  timeFormat,
  showTimeZoneSuffix,
  isDisabled,
  labelFormat,
  utcSuffix,
  dateStartInputAriaLabel,
  dateEndInputAriaLabel
}, ref) => {
  const handleClick = useCallback(e => {
    onClick({
      originalEvent: e
    });
  }, [onClick]);
  const handleKeyDown = useCallback(e => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    onClick({
      originalEvent: e,
      openedWithKeyboard: true
    });
  }, [onClick]);
  const attrs = useNonNativeButtonAttrs({
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    isDisabled
  });
  return /*#__PURE__*/_jsxs("div", {
    className: "date-range-picker-input",
    "test-id": "date-range-picker-input",
    ...attrs,
    ref: ref,
    children: [/*#__PURE__*/_jsx(InputWrapper, {
      datetime: start,
      dateFormat: labelFormat || dateFormat,
      timeFormat: timeFormat,
      showTimeZoneSuffix: showTimeZoneSuffix,
      testId: "date-range-picker-input-start",
      isDisabled: isDisabled,
      utcSuffix: utcSuffix,
      onClick: e => {
        e.stopPropagation(); // prevent actual input from being focused
        onClick({
          originalEvent: e,
          targetInput: DATE_RANGE_INPUT_TYPES.START
        });
      },
      ariaLabel: dateStartInputAriaLabel
    }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: faArrowRight,
      className: "date-range-picker-arrow-icon"
    }), /*#__PURE__*/_jsx(InputWrapper, {
      datetime: end,
      dateFormat: labelFormat || dateFormat,
      timeFormat: timeFormat,
      showTimeZoneSuffix: showTimeZoneSuffix,
      testId: "date-range-picker-input-end",
      isDisabled: isDisabled,
      utcSuffix: utcSuffix,
      onClick: e => {
        e.stopPropagation(); // prevent actual input from being focused
        onClick({
          originalEvent: e,
          targetInput: DATE_RANGE_INPUT_TYPES.END
        });
      },
      ariaLabel: dateEndInputAriaLabel
    })]
  });
});
DateRangePickerInput.displayName = 'DateRangePickerInput';
export default DateRangePickerInput;
function InputWrapper({
  datetime,
  dateFormat,
  timeFormat,
  showTimeZoneSuffix,
  testId,
  isDisabled,
  utcSuffix,
  onClick,
  ariaLabel
}) {
  const value = [...(dateFormat ? [datetime.format(dateFormat)] : []), ...(timeFormat ? [showTimeZoneSuffix ? `${datetime.format(timeFormat)} ${utcSuffix}` : datetime.format(timeFormat)] : [])].join(' ');
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
    _jsx("div", {
      className: "datetime-picker-input",
      "test-id": testId,
      onClick: onClick,
      children: /*#__PURE__*/_jsx(Input, {
        type: INPUT_TYPES.TEXT,
        value: value,
        isDisabled: isDisabled,
        rightIcon: faCalendar,
        placeholder: `${dateFormat} ${timeFormat || ''}`,
        "aria-label": ariaLabel
      })
    })
  );
}