import React, { useState } from 'react';
import { Dropdown, DROPDOWN_PLACEMENT_TYPES } from '../dropdown';
import { useTranslation } from '../hooks/use-translation';
import DateRangePickerButton from './datetime-range-picker-button';
import DateRangePickerPanel, { DATE_RANGE_INPUT_TYPES } from './datetime-range-picker-panel';
import DateRangePickerInput from './datetime-range-picker-input';
import { jsx as _jsx } from "react/jsx-runtime";
export const ANCHOR_TYPES = {
  BUTTON: 'button',
  INPUT: 'input'
};
export const VIEW_MODE_TYPE = {
  DAYS: 'days',
  MONTHS: 'months',
  TIME: 'time',
  YEARS: 'years'
};
export const VIEW_MODE = [VIEW_MODE_TYPE.DAYS, VIEW_MODE_TYPE.MONTHS, VIEW_MODE_TYPE.TIME, VIEW_MODE_TYPE.YEARS];
export const INITIAL_DIRECTION = {
  PAST: 'past',
  FUTURE: 'future'
};
/**
 * Display two datetime pickers side-by-side for selecting a range
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
function DateRangePicker({
  onUpdate,
  validateOnChange,
  validateOnClick,
  start,
  end,
  minStart,
  maxEnd,
  sameDateError,
  labelFormat,
  anchorType = ANCHOR_TYPES.BUTTON,
  buttonText,
  cancelButtonText,
  resetText,
  dateFormat = 'YYYY-MM-DD',
  timeFormat = 'HH:mm',
  initialDirection = INITIAL_DIRECTION.PAST,
  initialViewMode = VIEW_MODE_TYPE.DAYS,
  placement = DROPDOWN_PLACEMENT_TYPES.TOP_START,
  showTimeZoneSuffix = true,
  isDisabled,
  utcSuffix,
  dateStartInputAriaLabel,
  dateEndInputAriaLabel
}) {
  const {
    t
  } = useTranslation();
  const utcSuffixValue = utcSuffix ?? t('UTC');
  const dateStartInputAriaLabelValue = dateStartInputAriaLabel ?? t('Start date');
  const dateEndInputAriaLabelValue = dateEndInputAriaLabel ?? t('End date');
  function handleSuccessfulUpdate(updatedStart, updatedEnd) {
    onUpdate(updatedStart, updatedEnd);
  }
  const [initialTargetInput, setInitialTargetInput] = useState(DATE_RANGE_INPUT_TYPES.START);
  return /*#__PURE__*/_jsx(Dropdown, {
    contentClassName: "datetime-range-picker-panel",
    placement: placement,
    hasCustomFocusHandling: true,
    shouldCloseDropdownOnEsc: true,
    renderAnchor: ({
      ref,
      onClick,
      isOpen
    }) => anchorType === ANCHOR_TYPES.INPUT ? /*#__PURE__*/_jsx(DateRangePickerInput, {
      ref: ref,
      onClick: ({
        originalEvent,
        targetInput = DATE_RANGE_INPUT_TYPES.START,
        openedWithKeyboard
      }) => {
        if (isDisabled) {
          return;
        }
        setInitialTargetInput(targetInput);
        onClick(originalEvent, openedWithKeyboard);
      },
      start: start,
      end: end,
      labelFormat: labelFormat,
      dateFormat: dateFormat,
      timeFormat: timeFormat,
      showTimeZoneSuffix: showTimeZoneSuffix,
      isDisabled: isOpen || isDisabled,
      utcSuffix: utcSuffixValue,
      dateStartInputAriaLabel: dateStartInputAriaLabelValue,
      dateEndInputAriaLabel: dateEndInputAriaLabelValue
    }) : /*#__PURE__*/_jsx(DateRangePickerButton, {
      ref: ref,
      onClick: onClick,
      isOpen: isOpen,
      isDisabled: isDisabled,
      start: start,
      end: end,
      labelFormat: labelFormat,
      dateFormat: dateFormat,
      timeFormat: timeFormat,
      showTimeZoneSuffix: showTimeZoneSuffix,
      utcSuffix: utcSuffixValue
    }),
    children: ({
      closeDropdown
    }) => /*#__PURE__*/_jsx(DateRangePickerPanel, {
      buttonText: buttonText ?? t('Update window'),
      defaultStart: start,
      defaultEnd: end,
      minStart: minStart,
      maxEnd: maxEnd,
      sameDateError: sameDateError,
      dateFormat: dateFormat,
      timeFormat: timeFormat,
      initialViewMode: initialViewMode,
      initialDirection: initialDirection,
      onSubmit: (newStart, newEnd) => {
        handleSuccessfulUpdate(newStart, newEnd);
        closeDropdown();
      },
      onDismiss: closeDropdown,
      validateOnClick: validateOnClick,
      validateOnChange: validateOnChange,
      resetText: resetText ?? t('Reset to initial value'),
      cancelButtonText: cancelButtonText ?? t('Cancel'),
      utcSuffix: utcSuffixValue,
      initialTargetInput: initialTargetInput,
      dateStartInputAriaLabel: dateStartInputAriaLabelValue,
      dateEndInputAriaLabel: dateEndInputAriaLabelValue
    })
  });
}
export default DateRangePicker;