import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
import { useStyles } from '../../lib/renderEnvironment/index.js';
import { Calendar } from '../Calendar/index.js';
import { getMonthInHumanFormat, getTodayDate } from '../Calendar/CalendarUtils.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { MobilePopup } from '../../internal/MobilePopup/index.js';
import { DateInput } from '../DateInput/index.js';
import { Button } from '../Button/index.js';
import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
import { DatePickerLocaleHelper } from './locale/index.js';
import { getStyles } from './MobilePicker.styles.js';
import { getMobilePickerTheme } from './getMobilePickerTheme.js';
export var MobilePickerDataTids = {
    input: 'MobilePicker__input',
    today: 'MobilePicker__today',
};
export var MobilePicker = function (props) {
    var locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);
    var styles = useStyles(getStyles);
    var theme = getMobilePickerTheme(useContext(ThemeContext));
    var calendarRef = useRef(null);
    var inputRef = useRef(null);
    var _a = useState(function () { return getTodayDate(); })[0], monthNative = _a.month, year = _a.year;
    var month = getMonthInHumanFormat(monthNative);
    var onValueChange = function (date) {
        var _a, _b;
        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, date);
        (_b = props.onCloseRequest) === null || _b === void 0 ? void 0 : _b.call(props);
    };
    useLayoutEffect(function () {
        // fix DateInput flushSync warning in React 18
        setTimeout(function () {
            var _a;
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        });
    }, []);
    var onTodayClick = function () {
        if (calendarRef.current) {
            calendarRef.current.scrollToMonth(month, year);
        }
    };
    return (React.createElement(ThemeContext.Provider, { value: theme },
        React.createElement(MobilePopup, { opened: true, headerChildComponent: React.createElement(DateInput, { value: props.value || '', width: "100%", withIcon: true, ref: inputRef, minDate: props.minDate, maxDate: props.maxDate, onValueChange: props.onValueChange, size: "medium", warning: props.warning, error: props.error, "data-tid": MobilePickerDataTids.input }), footerChildComponent: props.enableTodayLink && (React.createElement(Button, { size: "medium", onClick: onTodayClick, "data-tid": MobilePickerDataTids.today }, locale.today)), onCloseRequest: props.onCloseRequest },
            React.createElement(Calendar, { ref: calendarRef, value: props.value, className: styles.calendarRoot(), minDate: props.minDate, maxDate: props.maxDate, onValueChange: onValueChange, isHoliday: props.isHoliday, renderDay: props.renderDay, onMonthChange: props.onMonthChange }))));
};
//# sourceMappingURL=MobilePicker.js.map