import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
import { Calendar } from "../../Calendar";
import { getMonthInHumanFormat, getTodayDate } from "../../Calendar/CalendarUtils";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { MobilePopup } from "../../../internal/MobilePopup";
import { DateInput } from "../../DateInput";
import { Button } from "../../Button";
import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
import { DatePickerLocaleHelper } from "../locale";
import { styles } from "../MobilePicker.styles";
import { getMobilePickerTheme } from "../getMobilePickerTheme";
export var MobilePickerDataTids = {
  input: 'MobilePicker__input',
  today: 'MobilePicker__today'
};
export var MobilePicker = function MobilePicker(props) {
  var locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper);
  var theme = getMobilePickerTheme(useContext(ThemeContext));
  var calendarRef = useRef(null);
  var inputRef = useRef(null);
  var _useState = useState(function () {
      return getTodayDate();
    }),
    _useState$ = _useState[0],
    monthNative = _useState$.month,
    year = _useState$.year;
  var month = getMonthInHumanFormat(monthNative);
  var onValueChange = function onValueChange(date) {
    props.onValueChange == null || props.onValueChange(date);
    props.onCloseRequest == null || props.onCloseRequest();
  };
  useLayoutEffect(function () {
    // fix DateInput flushSync warning in React 18
    setTimeout(function () {
      var _inputRef$current;
      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
    });
  }, []);
  var onTodayClick = function onTodayClick() {
    if (calendarRef.current) {
      calendarRef.current.scrollToMonth(month, year);
    }
  };
  return /*#__PURE__*/(
    React.createElement(ThemeContext.Provider, {
      value: theme
    }, /*#__PURE__*/
    React.createElement(MobilePopup, {
      opened: true,
      headerChildComponent: /*#__PURE__*/
      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 && /*#__PURE__*/
      React.createElement(Button, {
        size: "medium",
        onClick: onTodayClick,
        "data-tid": MobilePickerDataTids.today
      }, locale.today),
      onCloseRequest: props.onCloseRequest
    }, /*#__PURE__*/

    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
    })))
  );
};