import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty } from '../../../_rollupPluginBabelHelpers-9wjJaosZ.js';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { hash } from '@ember/helper';
import { on } from '@ember/modifier';
import { action } from '@ember/object';
import dateMath from '@elastic/datemath';
import moment from 'moment';
import EuiFieldText from '../../eui-field-text.js';
import EuiFormLabel from '../../eui-form-label.js';
import EuiFormRow from '../../eui-form-row.js';
import EuiI18nComponent from '../../eui-i18n.js';
import DatetimePicker from './datetime-picker.js';

var _class, _descriptor, _descriptor2, _descriptor3;
let AbsoluteTab = setComponentTemplate(precompileTemplate(`
    <div>
      <DatetimePicker
        @onChange={{this.handleChange}}
        @dateFormat={{@dateFormat}}
        @selected={{this.valueAsMoment}}
      />
      <EuiI18n
        @token="euiAbsoluteTab.dateFormatError"
        @default="Expected format: {dateFormat}"
        @values={{hash dateFormat=@dateFormat}}
        as |Token|
      >
        <Token as |dateFormatError|>
          <EuiFormRow
            class="euiSuperDatePicker__absoluteDateFormRow"
            @isInvalid={{this.isTextInvalid}}
            @error={{if this.isTextInvalid dateFormatError}}
          >
            <EuiFieldText
              @isInvalid={{this.isTextInvalid}}
              @value={{this.textInputValue}}
              @compressed={{true}}
              {{on "input" this.triggerChange}}
              {{on "change" this.handleTextChange}}
            >
              <:prepend as |classes|>
                <EuiFormLabel class={{classes}}>
                  {{@labelPrefix}}
                </EuiFormLabel>
              </:prepend>
            </EuiFieldText>
          </EuiFormRow>
        </Token>
      </EuiI18n>
    </div>
  `, {
  strictMode: true,
  scope: () => ({
    DatetimePicker,
    EuiI18n: EuiI18nComponent,
    hash,
    EuiFormRow,
    EuiFieldText,
    on,
    EuiFormLabel
  })
}), (_class = class AbsoluteTab extends Component {
  constructor(owner, args) {
    super(owner, args);
    _initializerDefineProperty(this, "isTextInvalid", _descriptor, this);
    _initializerDefineProperty(this, "textInputValue", _descriptor2, this);
    _initializerDefineProperty(this, "valueAsMoment", _descriptor3, this);
    const parsedValue = dateMath.parse(this.args.value, {
      roundUp: this.args.roundUp
    });
    const valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment();
    const textInputValue = valueAsMoment.locale(this.args.locale || 'en').format(this.args.dateFormat);
    this.isTextInvalid = false;
    this.textInputValue = textInputValue;
    this.valueAsMoment = valueAsMoment;
  }
  handleChange(date, e) {
    if (date === null) {
      return;
    }
    this.args.onChange(date.toISOString(), e);
    const valueAsMoment = moment(date);
    this.valueAsMoment = valueAsMoment;
    this.textInputValue = valueAsMoment.format(this.args.dateFormat);
    this.isTextInvalid = false;
  }
  handleTextChange(e) {
    const valueAsMoment = moment(e.target.value, this.args.dateFormat, true);
    const dateIsValid = valueAsMoment.isValid();
    if (dateIsValid) {
      this.args.onChange(valueAsMoment.toISOString(), e);
    }
    this.textInputValue = e.target.value;
    this.isTextInvalid = !dateIsValid;
    this.valueAsMoment = dateIsValid ? valueAsMoment : null;
  }

  // `change` event on an input gets called after a `blur`
  // blur the input and focus again to trigger the change event
  // and call `handleTextChange` with the updated value
  // and keep the field focused
  triggerChange(e) {
    e.target.blur();
    e.target.focus();
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "isTextInvalid", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "textInputValue", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "valueAsMoment", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _applyDecoratedDescriptor(_class.prototype, "handleChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "handleChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleTextChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "handleTextChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "triggerChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "triggerChange"), _class.prototype)), _class));

export { AbsoluteTab as default };
//# sourceMappingURL=absolute-tab.js.map
