"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_react_native = require("react-native");
var import_prop_types = require("prop-types");
var import_styled_components = __toESM(require("styled-components"));
var import_yoga_icons = require("@gympass/yoga-icons");
var import_Helper = __toESM(require("./Helper"));
const ICON_SIZE = 20;
const Wrapper = import_styled_components.default.View(
  ({
    full,
    theme: {
      yoga: {
        components: { input }
      }
    }
  }) => `
    position: relative;
    width: ${full ? "100%" : `${input.width}px`};
  `
);
const Field = import_styled_components.default.TextInput(
  ({
    cleanable,
    disabled,
    error,
    focus,
    full,
    textContentType,
    typed,
    theme: {
      yoga: {
        baseFont,
        colors,
        components: { input }
      }
    }
  }) => `
    width: ${full ? "100%" : `${input.width}px`};
    height: ${input.height}px;
    min-height: ${input.height}px;

    padding-top: ${input.padding.top - 2}px;
    padding-right: ${cleanable || textContentType === "password" ? ICON_SIZE + input.padding.right * 2 : input.padding.right}px;
    padding-bottom: ${input.padding.bottom - 2}px;
    padding-left: ${input.padding.left}px;

    border-radius: ${input.border.radius}px;
    border: ${input.border.width}px solid ${input.border.color.default};

    color: ${input.font.color.default};
    font-family: ${baseFont.family};
    font-size: ${input.font.size}px;
    font-weight: ${input.font.weight};
    line-height: ${input.font.lineHeight}px;

    ${focus ? `border-color: ${input.border.color.typed};` : ""}
    ${focus || typed ? `color: ${input.font.color.focus};` : ""}
    ${error ? `border-color: ${colors.feedback.attention[1]};` : ""}

    ${disabled ? `
          border-color: ${colors.elements.lineAndBorders};
          color: ${colors.text.disabled};
        ` : ""}
  `
);
const LabelWrapper = (0, import_styled_components.default)(import_react_native.Animated.View)(
  ({
    focus,
    typed,
    theme: {
      yoga: {
        components: { input }
      }
    }
  }) => `
    position: absolute;
    left: ${input.padding.left}px;

    transform: translateY(-${input.padding.top / 2}px);

    ${focus || typed ? `left: ${input.padding.left - 2}px;` : ""}
  `
);
const Label = (0, import_styled_components.default)(import_react_native.Animated.Text)(
  ({
    disabled,
    error,
    focus,
    typed,
    theme: {
      yoga: {
        colors,
        baseFont,
        components: { input }
      }
    }
  }) => `
    background-color: ${colors.white};

    font-family: ${baseFont.family};
    font-size: ${input.font.size}px;
    font-weight: ${input.font.weight};
    line-height: ${input.font.lineHeight}px;
    color: ${input.label.color.default};

    ${focus ? `
          color: ${input.label.color.focus};
        ` : ""}

    ${focus || typed ? `
        padding-right: ${input.label.padding.right}px;
        padding-left: ${input.label.padding.left}px;
      ` : ""}

    ${error ? `color: ${colors.feedback.attention[1]};` : ""}
    ${disabled ? `color: ${colors.text.disabled};` : ""}
  `
);
const CloseIcon = import_styled_components.default.View(
  ({
    theme: {
      yoga: {
        spacing,
        components: { input }
      }
    }
  }) => `
    position: absolute;
    top: 0px;
    right: 0px;
    height: ${input.height}px;
    justify-content: center;
    align-items: center;

    padding-right: ${spacing.small}px;
    padding-left: ${spacing.small}px;
  `
);
const Input = import_react.default.forwardRef(
  (_a, ref) => {
    var _b = _a, {
      cleanable = true,
      disabled = false,
      error = void 0,
      full = false,
      helper = void 0,
      label = "",
      maxLength = void 0,
      readOnly = false,
      style = {},
      textContentType = void 0,
      value = "",
      onBlur = () => {
      },
      onClean = () => {
      },
      onFocus = () => {
      },
      hideMaxLength = false,
      theme: {
        yoga: {
          colors,
          transition,
          components: { input }
        }
      }
    } = _b, props = __objRest(_b, [
      "cleanable",
      "disabled",
      "error",
      "full",
      "helper",
      "label",
      "maxLength",
      "readOnly",
      "style",
      "textContentType",
      "value",
      "onBlur",
      "onClean",
      "onFocus",
      "hideMaxLength",
      "theme"
    ]);
    const inputRef = ref || (0, import_react.useRef)(null);
    const [focused, setFocused] = (0, import_react.useState)(false);
    const [typed, setTyped] = (0, import_react.useState)(Boolean(value));
    (0, import_react.useEffect)(() => {
      setTyped(Boolean(value));
    }, [value]);
    const iconColor = () => {
      if (disabled) {
        return colors.elements.backgroundAndDisabled;
      }
      if (focused) {
        return input.font.color.focus;
      }
      return input.font.color.default;
    };
    const [labelTopAnimation] = (0, import_react.useState)(
      new import_react_native.Animated.Value(input.padding.top * 1.5)
    );
    const [fontSizeAnimation] = (0, import_react.useState)(
      new import_react_native.Animated.Value(input.label.font.size.default)
    );
    const animate = (animation, toValue) => import_react_native.Animated.timing(animation, {
      toValue,
      duration: transition.duration[1],
      easing: import_react_native.Easing.bezier(...transition.timing[0]),
      useNativeDriver: false
    }).start();
    (0, import_react.useEffect)(() => {
      const shouldAnimate = typed || focused;
      animate(labelTopAnimation, shouldAnimate ? 1 : input.padding.top * 1.5);
      animate(
        fontSizeAnimation,
        shouldAnimate ? input.label.font.size.typed : input.label.font.size.default
      );
    }, [focused, typed]);
    const _a2 = Array.isArray(style) ? Object.assign({}, ...style) : style, { height = input.height } = _a2, styles = __objRest(_a2, ["height"]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { full, style: styles, children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        Field,
        __spreadProps(__spreadValues({}, props), {
          cleanable,
          disabled,
          editable: !(readOnly || disabled),
          error,
          focus: focused,
          full,
          maxLength,
          style: {
            height
          },
          textContentType,
          typed,
          value,
          onFocus: (e) => {
            setFocused(true);
            onFocus(e);
          },
          onBlur: (e) => {
            setFocused(false);
            onBlur(e);
          },
          ref: inputRef
        })
      ),
      Boolean(label) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        LabelWrapper,
        {
          focus: focused,
          pointerEvents: "none",
          typed,
          style: { top: labelTopAnimation },
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            Label,
            {
              disabled,
              error,
              focus: focused,
              typed,
              style: { fontSize: fontSizeAnimation },
              children: label
            }
          )
        }
      ),
      cleanable && typed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_react_native.TouchableWithoutFeedback,
        {
          accessibilityRole: "button",
          onPress: () => {
            if (disabled)
              return;
            onClean("");
          },
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { height: input.height, width: 20, fill: iconColor() }) })
        }
      ),
      (helper || maxLength || error) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_Helper.default,
        {
          full,
          error,
          helper,
          focused,
          disabled,
          maxLength,
          length: value.length,
          hideMaxLength
        }
      )
    ] });
  }
);
Input.propTypes = {
  /** 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,
  /** maximum length (number of characters) of value */
  maxLength: import_prop_types.number,
  readOnly: import_prop_types.bool,
  textContentType: import_prop_types.string,
  value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
  style: (0, import_prop_types.oneOfType)([(0, import_prop_types.shape)({}), (0, import_prop_types.arrayOf)((0, import_prop_types.shape)({}))]),
  onBlur: import_prop_types.func,
  /** callback invoked when close icon is clicked */
  onClean: import_prop_types.func,
  onFocus: import_prop_types.func,
  hideMaxLength: import_prop_types.bool
};
var Input_default = (0, import_styled_components.withTheme)(Input);
