import { clsx } from 'clsx';
import { PureComponent, createRef } from 'react';
import Calendar from '../calendar/Calendar.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../common/propsValues/control.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import { MonthFormat } from '../common/propsValues/monthFormat.mjs';
import { Position } from '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/formatting';
import '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
import { withInputAttributes } from '../inputs/contexts.mjs';
import { OverlayIdProvider } from '../provider/overlay/OverlayIdProvider.mjs';
import DateTrigger from './dateTrigger/DateTrigger.mjs';

class DateLookup extends PureComponent {
  static defaultProps = {
    value: null,
    min: null,
    max: null,
    size: Size.MEDIUM,
    placeholder: '',
    label: '',
    monthFormat: MonthFormat.LONG,
    disabled: false,
    clearable: false
  };
  element = /*#__PURE__*/createRef();
  constructor(props) {
    super(props);
    this.state = {
      originalDate: null,
      open: false
    };
  }
  componentDidUpdate(previousProps) {
    if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
      this.focusOn('.active');
    }
  }
  open = () => {
    const {
      onFocus
    } = this.props;
    this.setState({
      open: true
    });
    if (onFocus) {
      onFocus();
    }
  };
  discard = () => {
    const {
      originalDate
    } = this.state;
    if (originalDate !== null) {
      this.props.onChange(originalDate);
    }
    this.close();
  };
  close = () => {
    const {
      onBlur
    } = this.props;
    this.setState({
      open: false,
      originalDate: null
    });
    if (onBlur) {
      onBlur();
    }
  };
  handleKeyDown = event => {
    const {
      open,
      originalDate
    } = this.state;
    switch (event.key) {
      case 'ArrowLeft':
      case 'ArrowUp':
      case 'ArrowRight':
      case 'ArrowDown':
        if (!open) {
          this.open();
          event.preventDefault();
        }
        break;
      case 'Escape':
        if (originalDate !== null) {
          this.props.onChange(originalDate);
        }
        this.close();
        event.preventDefault();
        break;
    }
  };
  focusOn = (preferredElement, fallbackElement) => {
    const element = this.element.current?.querySelector(preferredElement);
    if (element) {
      element.focus();
    } else if (fallbackElement) {
      this.focusOn(fallbackElement);
    }
  };
  handleDateChange = date => {
    this.setState(state => {
      const originalDate = state.originalDate ?? this.props.value;
      return {
        originalDate
      };
    }, () => {
      this.props.onChange(date);
    });
  };
  handleDateSelect = date => {
    this.props.onChange(date);
    this.close();
    this.focusOn('.btn');
  };
  getCalendar = () => {
    const {
      value,
      min,
      max,
      monthFormat,
      placeholder
    } = this.props;
    return /*#__PURE__*/jsx("div", {
      className: "p-a-1",
      children: /*#__PURE__*/jsx(Calendar, {
        value: value,
        min: min,
        max: max,
        monthFormat: monthFormat,
        placeholder: placeholder,
        onChange: this.handleDateChange,
        onSelect: this.handleDateSelect
      })
    });
  };
  handleClear = () => {
    this.props.onChange(null);
    this.focusOn('.np-date-trigger');
  };
  render() {
    const {
      open
    } = this.state;
    const {
      inputAttributes,
      id: idProp,
      'aria-labelledby': ariaLabelledByProp,
      size,
      placeholder,
      label,
      monthFormat,
      disabled,
      clearable,
      value
    } = this.props;
    const id = idProp ?? inputAttributes?.id;
    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
    return /*#__PURE__*/jsx("div", {
      ref: this.element,
      "aria-labelledby": id,
      "aria-invalid": inputAttributes?.['aria-invalid'],
      "aria-describedby": inputAttributes?.['aria-describedby'],
      className: clsx('input-group', disabled && 'disabled'),
      onKeyDown: this.handleKeyDown,
      children: /*#__PURE__*/jsxs(OverlayIdProvider, {
        open: open,
        children: [/*#__PURE__*/jsx(DateTrigger, {
          id: id,
          ariaLabelledBy: ariaLabelledBy,
          selectedDate: value,
          size: size,
          placeholder: placeholder,
          label: label,
          monthFormat: monthFormat,
          disabled: disabled || false,
          onClick: this.open,
          onClear: !disabled && clearable && value ? this.handleClear : undefined
        }), /*#__PURE__*/jsx(ResponsivePanel, {
          anchorRef: this.element,
          open: open,
          className: "tw-date-lookup-menu",
          position: Position.BOTTOM,
          considerHeight: true,
          onClose: this.discard,
          children: this.getCalendar()
        })]
      })
    });
  }
}
const WrappedDateLookup = withInputAttributes(DateLookup, {
  nonLabelable: true
});
WrappedDateLookup.displayName = 'DateLookup';

export { WrappedDateLookup as default };
//# sourceMappingURL=DateLookup.mjs.map
