"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Input_exports = {};
__export(Input_exports, {
  default: () => Input_default
});
module.exports = __toCommonJS(Input_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import_prop_types = require("prop-types");
var import_yoga_icons = require("@gympass/yoga-icons");
var import_Theme = require("../../Theme");
var import_Field = __toESM(require("./Field"));
var import_Helper = __toESM(require("./Helper"));
var import_Fieldset = __toESM(require("./Fieldset"));
var import_Legend = __toESM(require("./Legend"));
var import_Label = __toESM(require("./Label"));
const Control = import_styled_components.default.div`
  box-sizing: border-box;
  width: ${({ full }) => full ? "100%" : import_styled_components.css`
          ${import_Theme.theme.components.input.width}px
        `};
`;
const IconWrapper = import_styled_components.default.div`
  ${({
  disabled,
  hasIconRight = false,
  theme: {
    yoga: {
      colors,
      spacing,
      components: { input }
    }
  }
}) => import_styled_components.css`
    position: absolute;
    top: 0;
    right: ${hasIconRight ? spacing.large : 0}px;

    padding-right: ${spacing.small}px;
    padding-left: ${spacing.xxsmall}px;

    height: ${input.height}px;
    cursor: pointer;

    outline: none;

    &:hover svg,
    &:focus svg {
      fill: ${input.font.color.focus};
    }

    svg {
      height: ${input.height}px;
      width: 20px;
      fill: ${input.font.color.default};
    }

    ${disabled ? `
      cursor: not-allowed;
      pointer-events: none;
      svg {
        fill: ${colors.steady};
      }
    ` : ""}
  `}
`;
const LeftElementWrapper = import_styled_components.default.div`
  ${({
  theme: {
    yoga: { spacing }
  }
}) => import_styled_components.css`
    position: absolute;
    left: ${spacing.xxsmall}px;
    top: 50%;
    transform: translateY(-50%);
  `}
`;
const noop = () => {
};
const Input = import_react.default.forwardRef(
  (_a, ref) => {
    var _b = _a, {
      cleanable = true,
      children,
      disabled = false,
      error,
      full = false,
      helper,
      label,
      ariaLabel,
      maxLength,
      readOnly = false,
      style,
      value = "",
      onChange = noop,
      onClean = noop,
      hideMaxLength = false,
      rightIcon,
      a11yId,
      closeAriaLabel = "Clear",
      includeAriaAttributes = true,
      leftElement,
      clearButtonAriaLabel = "Clear"
    } = _b, props = __objRest(_b, [
      "cleanable",
      "children",
      "disabled",
      "error",
      "full",
      "helper",
      "label",
      "ariaLabel",
      "maxLength",
      "readOnly",
      "style",
      "value",
      "onChange",
      "onClean",
      "hideMaxLength",
      "rightIcon",
      "a11yId",
      "closeAriaLabel",
      "includeAriaAttributes",
      "leftElement",
      "clearButtonAriaLabel"
    ]);
    const inputRef = ref || (0, import_react.useRef)(null);
    const cleanField = (e) => {
      if (e.type === "click" || e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onClean("");
        inputRef.current.focus();
      }
    };
    const hasHelper = helper || maxLength || error;
    const helperA11yId = includeAriaAttributes && a11yId && `${a11yId}-helper`;
    const labelA11yId = includeAriaAttributes && a11yId && `${a11yId}-label`;
    let a11yFieldProps;
    const labelAria = ariaLabel || label;
    if (includeAriaAttributes) {
      a11yFieldProps = a11yId ? __spreadValues(__spreadValues({}, hasHelper && { "aria-describedby": helperA11yId }), label && { "aria-labelledby": labelA11yId }) : __spreadValues({}, labelAria && { "aria-label": labelAria });
      a11yFieldProps["aria-invalid"] = !!error;
    } else {
      a11yFieldProps = {};
    }
    const leftElementRef = (0, import_react.useRef)(null);
    const [leftElementTextIndent, setLeftElementTextIndent] = (0, import_react.useState)(0);
    (0, import_react.useLayoutEffect)(() => {
      if (leftElementRef.current) {
        setLeftElementTextIndent(`${leftElementRef.current.offsetWidth}px`);
      }
    }, [leftElement]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Control, { full, children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
        import_Fieldset.default,
        {
          disabled,
          error,
          full,
          label,
          style,
          value,
          children: [
            leftElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftElementWrapper, { ref: leftElementRef, children: leftElement }),
            !children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_Field.default,
              __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), {
                label,
                cleanable,
                disabled,
                error,
                full,
                readOnly,
                maxLength
              }), {
                ref: inputRef,
                value,
                onChange
              }), a11yFieldProps), {
                style: leftElement ? { textIndent: leftElementTextIndent } : {}
              })
            ) : children,
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_Label.default,
              __spreadProps(__spreadValues({
                error,
                disabled
              }, labelA11yId && { id: labelA11yId }), {
                children: label
              })
            ),
            label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.default, { children: label }),
            cleanable && !readOnly && value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              IconWrapper,
              {
                tabIndex: 0,
                disabled,
                onClick: cleanField,
                onKeyDown: cleanField,
                width: 20,
                height: 20,
                role: "button",
                hasIconRight: !!rightIcon,
                "aria-label": clearButtonAriaLabel,
                "data-testid": "clearButtonAriaLabel",
                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { "aria-label": closeAriaLabel })
              }
            ),
            !!rightIcon && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              IconWrapper,
              {
                tabIndex: 0,
                disabled,
                width: 20,
                height: 20,
                role: "button",
                children: rightIcon
              }
            )
          ]
        }
      ),
      hasHelper && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_Helper.default,
        {
          error,
          helper,
          maxLength,
          length: value.length,
          disabled,
          hideMaxLength,
          a11yId: helperA11yId
        }
      )
    ] });
  }
);
Input.propTypes = {
  className: import_prop_types.string,
  /** a children node to override default input component */
  children: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
  /** display a close icon to clean the field */
  cleanable: import_prop_types.bool,
  disabled: import_prop_types.bool,
  error: import_prop_types.string,
  full: import_prop_types.bool,
  /** a helper text to be displayed below field */
  helper: import_prop_types.string,
  label: import_prop_types.string,
  ariaLabel: import_prop_types.string,
  /** maximum length (number of characters) of value */
  maxLength: import_prop_types.number,
  readOnly: import_prop_types.bool,
  style: (0, import_prop_types.shape)({}),
  value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
  onChange: import_prop_types.func,
  /** callback invoked when close icon is clicked, it returns a empty string to update your state */
  onClean: import_prop_types.func,
  /** when max length helper is unnecessary to appear */
  hideMaxLength: import_prop_types.bool,
  placeholder: import_prop_types.string,
  rightIcon: import_prop_types.node,
  /** a unique prefix to generate HTML IDs to be used for aria-labelledby and aria-describedby */
  a11yId: import_prop_types.string,
  /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
  includeAriaAttributes: import_prop_types.bool,
  /** this prop will be used in the aria-label of the clear input button. */
  closeAriaLabel: import_prop_types.string,
  /** element on the left */
  leftElement: import_prop_types.node,
  /** aria label for close button */
  clearButtonAriaLabel: import_prop_types.string
};
var Input_default = Input;
