var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
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;
};
import { jsx, jsxs } from "react/jsx-runtime";
import React, { useState, useEffect, useRef } from "react";
import { TouchableWithoutFeedback, Animated, Easing } from "react-native";
import {
  func,
  string,
  bool,
  number,
  oneOfType,
  shape,
  arrayOf
} from "prop-types";
import styled, { withTheme } from "styled-components";
import { Close } from "@gympass/yoga-icons";
import Helper from "./Helper";
const ICON_SIZE = 20;
const Wrapper = styled.View(
  ({
    full,
    theme: {
      yoga: {
        components: { input }
      }
    }
  }) => `
    position: relative;
    width: ${full ? "100%" : `${input.width}px`};
  `
);
const Field = styled.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.steady};
          color: ${colors.steady};
        ` : ""}
  `
);
const LabelWrapper = styled(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 = styled(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.steady};` : ""}
  `
);
const CloseIcon = styled.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 = React.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 || useRef(null);
    const [focused, setFocused] = useState(false);
    const [typed, setTyped] = useState(Boolean(value));
    useEffect(() => {
      setTyped(Boolean(value));
    }, [value]);
    const iconColor = () => {
      if (disabled) {
        return colors.steady;
      }
      if (focused) {
        return input.font.color.focus;
      }
      return input.font.color.default;
    };
    const [labelTopAnimation] = useState(
      new Animated.Value(input.padding.top * 1.5)
    );
    const [fontSizeAnimation] = useState(
      new Animated.Value(input.label.font.size.default)
    );
    const animate = (animation, toValue) => Animated.timing(animation, {
      toValue,
      duration: transition.duration[1],
      easing: Easing.bezier(...transition.timing[0]),
      useNativeDriver: false
    }).start();
    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__ */ jsxs(Wrapper, { full, style: styles, children: [
      /* @__PURE__ */ 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__ */ jsx(
        LabelWrapper,
        {
          focus: focused,
          pointerEvents: "none",
          typed,
          style: { top: labelTopAnimation },
          children: /* @__PURE__ */ jsx(
            Label,
            {
              disabled,
              error,
              focus: focused,
              typed,
              style: { fontSize: fontSizeAnimation },
              children: label
            }
          )
        }
      ),
      cleanable && typed && /* @__PURE__ */ jsx(
        TouchableWithoutFeedback,
        {
          accessibilityRole: "button",
          onPress: () => {
            if (disabled)
              return;
            onClean("");
          },
          children: /* @__PURE__ */ jsx(CloseIcon, { children: /* @__PURE__ */ jsx(Close, { height: input.height, width: 20, fill: iconColor() }) })
        }
      ),
      (helper || maxLength || error) && /* @__PURE__ */ jsx(
        Helper,
        {
          full,
          error,
          helper,
          focused,
          disabled,
          maxLength,
          length: value.length,
          hideMaxLength
        }
      )
    ] });
  }
);
Input.propTypes = {
  /** display a close icon to clean the field */
  cleanable: bool,
  disabled: bool,
  error: string,
  full: bool,
  /** A helper text to be displayed below field */
  helper: string,
  label: string,
  /** maximum length (number of characters) of value */
  maxLength: number,
  readOnly: bool,
  textContentType: string,
  value: oneOfType([string, number]),
  style: oneOfType([shape({}), arrayOf(shape({}))]),
  onBlur: func,
  /** callback invoked when close icon is clicked */
  onClean: func,
  onFocus: func,
  hideMaxLength: bool
};
var Input_default = withTheme(Input);
export {
  Input_default as default
};
