var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { forwardRef, useContext, useEffect, useImperativeHandle } from 'react';
import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
import { DateInput } from '../DateInput/index.js';
import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
import { isNonNullable } from '../../lib/utils.js';
import { DateRangePickerContext } from './DateRangePickerContext.js';
import { DateRangePickerDataTids } from './DateRangePicker.js';
import { DateRangePickerLocaleHelper } from './locale/index.js';
var DateRangePickerInput = forwardRef(function (props, ref) {
    var _a = useContext(DateRangePickerContext), minDate = _a.minDate, maxDate = _a.maxDate, startValue = _a.startValue, endValue = _a.endValue, size = _a.size, setStartValue = _a.setStartValue, setStartOptional = _a.setStartOptional, setStartDisabled = _a.setStartDisabled, setEndValue = _a.setEndValue, setEndOptional = _a.setEndOptional, setEndDisabled = _a.setEndDisabled, setMinDate = _a.setMinDate, setMaxDate = _a.setMaxDate, setFocusInput = _a.setFocusInput, open = _a.open, close = _a.close, dateRangePickerRef = _a.dateRangePickerRef, startRef = _a.startRef, endRef = _a.endRef;
    var isStart = props.type === 'start';
    var isEnd = props.type === 'end';
    var locale = useLocaleForControl('DateRangePicker', DateRangePickerLocaleHelper);
    var 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 () {
        var _a;
        if (isStart && startValue !== props.value && isNonNullable(startValue)) {
            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, startValue);
        }
    }, [startValue]);
    useEffect(function () {
        var _a;
        if (isEnd && endValue !== props.value && isNonNullable(endValue)) {
            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, endValue);
        }
    }, [endValue]);
    var commonProps = __assign(__assign({ withIcon: true, size: size, minDate: minDate, maxDate: maxDate }, props), { onValueChange: function (value) {
            if (isStart) {
                setStartValue(value || '');
            }
            else if (isEnd) {
                setEndValue(value || '');
            }
        }, onClick: function (e) {
            var _a;
            if (props.disabled) {
                return;
            }
            open(props.type);
            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
        }, onFocus: function (e) {
            var _a;
            open(props.type);
            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
        }, onBlur: function (e) {
            var _a, _b;
            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
            if (isMobile) {
                return;
            }
            var nextFocusedElement = e.relatedTarget;
            if (!((_b = dateRangePickerRef.current) === null || _b === void 0 ? void 0 : _b.contains(nextFocusedElement))) {
                close();
            }
            setFocusInput(null);
        } });
    switch (props.type) {
        case 'start':
            return (React.createElement(DateInput, __assign({}, commonProps, { value: props.value || '', "data-tid": props['data-tid'] || DateRangePickerDataTids.start, "aria-label": props['aria-label'] || locale.startDateLabel, ref: startRef })));
        case 'end':
            return (React.createElement(DateInput, __assign({}, 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 (React.createElement(DateRangePickerInput, __assign({ type: "start" }, props, { ref: ref }))); });
export var DateRangePickerEnd = forwardRefAndName('DateRangePickerEnd', function (props, ref) { return (React.createElement(DateRangePickerInput, __assign({ type: "end" }, props, { ref: ref }))); });
//# sourceMappingURL=DateRangePickerInput.js.map