import { h, Fragment } from '@stencil/core';
import { calendar } from '@teliads/icons';
export const DatePickerInput = ({ onClick, dateFormatter, describedBy, localization, name, formattedValue, valueAsDate, value, identifier, disabled, readonly, required, role, touched, buttonLabel, buttonRef, inputRef, onInput, onBlur, onFocus, makeTouched, htmlForm, }) => {
  const toggleDisabledState = readonly || disabled;
  return (h(Fragment, null,
    h("input", { class: {
        'telia-date-picker__input': true,
        'telia-date-picker__input--touched': touched,
      }, value: formattedValue, id: identifier, disabled: disabled, readonly: readonly, role: role, required: required ? true : undefined, "aria-autocomplete": "none", "aria-describedby": describedBy, onInput: onInput, onFocus: onFocus, onBlur: event => {
        makeTouched();
        onBlur(event);
      }, autoComplete: "off", ref: inputRef, onInvalid: event => {
        makeTouched();
        event.preventDefault();
      }, form: htmlForm }),
    h("input", { type: "hidden", name: name, value: value }),
    h("div", { class: "telia-date-picker__input-icon-container" },
      h("telia-button", { allyLabel: buttonLabel, variant: "text", size: "sm", onClick: onClick, disabled: toggleDisabledState, ref: el => buttonRef(el), type: "button", "data-testid": "telia-date-picker__toggle-button" },
        h("telia-icon", { class: "telia-date-picker__toggle-icon", svg: calendar.svg, size: "sm" }),
        h("span", { class: "telia-date-picker__vhidden" },
          localization.buttonLabel,
          valueAsDate && (h("span", null,
            ", ",
            localization.selectedDateMessage,
            ' ',
            dateFormatter.format(valueAsDate))))))));
};
