import { PureComponent } from 'react';
import TextField from '../TextField/TextField';
import classNames from 'classnames';
import { t } from '../i18n';
import uniqueId from 'lodash/uniqueId';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export class DateInput extends PureComponent {
  constructor(props) {
    super(props);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.id = props.id ?? uniqueId('date-input--');
  }
  formatDate() {
    if (this.props.dateFormatter && this.monthInput && this.dayInput && this.yearInput) {
      const values = {
        month: this.monthInput.value,
        day: this.dayInput.value,
        year: this.yearInput.value
      };
      return this.props.dateFormatter(values);
    }
  }
  handleBlur(evt) {
    if (this.props.onBlur) {
      this.props.onBlur(evt, this.formatDate());
    }
    if (this.props.onComponentBlur) {
      this.handleComponentBlur(evt);
    }
  }
  handleChange(evt) {
    this.props.onChange(evt, this.formatDate());
  }
  handleComponentBlur(evt) {
    // The active element is always the document body during a focus
    // transition, so in order to check if the newly focused element
    // is one of our other date inputs, we're going to have to wait
    // a bit.
    setTimeout(() => {
      if (document.activeElement !== this.dayInput && document.activeElement !== this.monthInput && document.activeElement !== this.yearInput) {
        this.props.onComponentBlur(evt, this.formatDate());
      }
    }, 20);
  }
  renderField(type, maxLength) {
    const sharedTextFieldProps = {
      className: 'ds-l-col--auto',
      labelClassName: 'ds-c-datefield__label',
      disabled: this.props.disabled,
      inversed: this.props.inversed,
      onBlur: (this.props.onBlur || this.props.onComponentBlur) && this.handleBlur,
      onChange: this.props.onChange && this.handleChange,
      numeric: true
    };
    return /*#__PURE__*/_jsx(TextField, {
      ...sharedTextFieldProps,
      defaultValue: this.props[`${type}DefaultValue`],
      value: this.props[`${type}Value`],
      label: this.props[`${type}Label`] ?? t(`dateField.${type}Label`),
      name: this.props[`${type}Name`],
      maxLength: maxLength,
      fieldClassName: classNames(`ds-c-field--${type}`, {
        'ds-c-field--error': this.props[`${type}Invalid`]
      }),
      id: `${this.id}__${type}`,
      inputRef: el => {
        this[`${type}Input`] = el;
        const ref = this.props[`${type}FieldRef`];
        if (typeof ref === 'function') {
          ref(el);
        } else if (ref) {
          ref.current = el;
        }
      },
      autoComplete: this.props.autoComplete && `bday-${type}`,
      "aria-invalid": this.props[`${type}Invalid`]
    });
  }
  render() {
    return /*#__PURE__*/_jsxs("div", {
      className: "ds-c-datefield__container ds-l-form-row",
      children: [this.props.language === 'en' ? this.renderField('month', 2) : this.renderField('day', 2), /*#__PURE__*/_jsx("span", {
        className: "ds-c-datefield__separator",
        children: "/"
      }), this.props.language === 'en' ? this.renderField('day', 2) : this.renderField('month', 2), /*#__PURE__*/_jsx("span", {
        className: "ds-c-datefield__separator",
        children: "/"
      }), this.renderField('year', 4)]
    });
  }
}
export default DateInput;