import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useContext, useEffect, useImperativeHandle } from 'react';
import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
import { DateInput } from "../../DateInput";
import { useResponsiveLayout } from "../../ResponsiveLayout";
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
import { isNonNullable } from "../../../lib/utils";
import { DateRangePickerContext } from "../DateRangePickerContext";
import { DateRangePickerDataTids } from "../DateRangePicker";
import { DateRangePickerLocaleHelper } from "../locale";
var DateRangePickerInput = /*#__PURE__*/forwardRef(function (props, ref) {
  var _useContext = useContext(DateRangePickerContext),
    minDate = _useContext.minDate,
    maxDate = _useContext.maxDate,
    startValue = _useContext.startValue,
    endValue = _useContext.endValue,
    size = _useContext.size,
    setStartValue = _useContext.setStartValue,
    setStartOptional = _useContext.setStartOptional,
    setStartDisabled = _useContext.setStartDisabled,
    setEndValue = _useContext.setEndValue,
    setEndOptional = _useContext.setEndOptional,
    setEndDisabled = _useContext.setEndDisabled,
    setMinDate = _useContext.setMinDate,
    setMaxDate = _useContext.setMaxDate,
    setFocusInput = _useContext.setFocusInput,
    open = _useContext.open,
    close = _useContext.close,
    dateRangePickerRef = _useContext.dateRangePickerRef,
    startRef = _useContext.startRef,
    endRef = _useContext.endRef;
  var isStart = props.type === 'start';
  var isEnd = props.type === 'end';
  var locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);
  var _useResponsiveLayout = useResponsiveLayout(),
    isMobile = _useResponsiveLayout.isMobile;
  useImperativeHandle(ref, function () {
    return isStart ? startRef.current : endRef.current;
  }, []);
  useEffect(function () {
    if (isStart && startValue !== props.value) {
      setStartValue(props.value || '');
    } else if (isEnd && endValue !== props.value) {
      setEndValue(props.value || '');
    }
  }, [props.value]);
  useEffect(function () {
    if (isStart) {
      setStartOptional(props.optional || false);
      setStartDisabled(props.disabled || false);
      setMinDate(props.minDate || '');
    } else if (isEnd) {
      setEndOptional(props.optional || false);
      setEndDisabled(props.disabled || false);
      setMaxDate(props.maxDate || '');
    }
  }, [props.optional, props.disabled, props.minDate, props.maxDate]);
  useEffect(function () {
    if (isStart && startValue !== props.value && isNonNullable(startValue)) {
      props.onValueChange == null || props.onValueChange(startValue);
    }
  }, [startValue]);
  useEffect(function () {
    if (isEnd && endValue !== props.value && isNonNullable(endValue)) {
      props.onValueChange == null || props.onValueChange(endValue);
    }
  }, [endValue]);
  var commonProps = _extends({
    withIcon: true,
    size: size,
    minDate: minDate,
    maxDate: maxDate
  }, props, {
    onValueChange: function onValueChange(value) {
      if (isStart) {
        setStartValue(value || '');
      } else if (isEnd) {
        setEndValue(value || '');
      }
    },
    onClick: function onClick(e) {
      if (props.disabled) {
        return;
      }
      open(props.type);
      props.onClick == null || props.onClick(e);
    },
    onFocus: function onFocus(e) {
      open(props.type);
      props.onFocus == null || props.onFocus(e);
    },
    onBlur: function onBlur(e) {
      var _dateRangePickerRef$c;
      props.onBlur == null || props.onBlur(e);
      if (isMobile) {
        return;
      }
      var nextFocusedElement = e.relatedTarget;
      if (!((_dateRangePickerRef$c = dateRangePickerRef.current) != null && _dateRangePickerRef$c.contains(nextFocusedElement))) {
        close();
      }
      setFocusInput(null);
    }
  });
  switch (props.type) {
    case 'start':
      return /*#__PURE__*/(
        React.createElement(DateInput, _extends({}, commonProps, {
          value: props.value || '',
          "data-tid": props['data-tid'] || DateRangePickerDataTids.start,
          "aria-label": props['aria-label'] || locale.startDateLabel,
          ref: startRef
        }))
      );
    case 'end':
      return /*#__PURE__*/(
        React.createElement(DateInput, _extends({}, commonProps, {
          value: props.value || '',
          "data-tid": props['data-tid'] || DateRangePickerDataTids.end,
          "aria-label": props['aria-label'] || locale.endDateLabel,
          ref: endRef
        }))
      );
  }
});
export var DateRangePickerStart = forwardRefAndName('DateRangePickerStart', function (props, ref) {
  return /*#__PURE__*/(
    React.createElement(DateRangePickerInput, _extends({
      type: "start"
    }, props, {
      ref: ref
    }))
  );
});
export var DateRangePickerEnd = forwardRefAndName('DateRangePickerEnd', function (props, ref) {
  return /*#__PURE__*/(
    React.createElement(DateRangePickerInput, _extends({
      type: "end"
    }, props, {
      ref: ref
    }))
  );
});