"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GhostText = GhostText;
exports.Icon = Icon;
exports.Input = Input;
exports.LabelText = LabelText;
exports.Root = Root;
exports.SuffixText = SuffixText;
exports.useSharedInputStyles = useSharedInputStyles;
var _react = require("react");
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _useInteractionState = require("../hooks/useInteractionState.js");
var _mergeRefs = require("../hooks/mergeRefs.js");
var _index = require("../styles/index.js");
var _index2 = require("../typography/index.js");
var _jsxRuntime = require("react/jsx-runtime");
const Context = /*#__PURE__*/(0, _react.createContext)({
  inputRef: null,
  isInvalid: false,
  hovered: false,
  onHoverIn: () => {},
  onHoverOut: () => {},
  focused: false,
  onFocus: () => {},
  onBlur: () => {}
});
Context.displayName = 'TextFieldContext';
function Root({
  children,
  isInvalid = false,
  style
}) {
  const inputRef = (0, _react.useRef)(null);
  const {
    state: hovered,
    onIn: onHoverIn,
    onOut: onHoverOut
  } = (0, _useInteractionState.useInteractionState)();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = (0, _useInteractionState.useInteractionState)();
  const context = (0, _react.useMemo)(() => ({
    inputRef,
    hovered,
    onHoverIn,
    onHoverOut,
    focused,
    onFocus,
    onBlur,
    isInvalid
  }), [inputRef, hovered, onHoverIn, onHoverOut, focused, onFocus, onBlur, isInvalid]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Context.Provider, {
    value: context,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [_index.atoms.flex_row, _index.atoms.align_center, _index.atoms.relative, _index.atoms.w_full, _index.atoms.px_md, style],
      ...(_reactNative.Platform.OS === 'web' ? {
        onClick: () => inputRef.current?.focus(),
        onMouseOver: onHoverIn,
        onMouseOut: onHoverOut
      } : undefined),
      children: children
    })
  });
}
function useSharedInputStyles() {
  const theme = (0, _useTheme.useTheme)();
  return (0, _react.useMemo)(() => {
    const hover = {
      borderColor: theme.colors.borderLight
    };
    const focus = {
      backgroundColor: theme.colors.contrast50,
      borderColor: theme.colors.primary
    };
    const error = {
      backgroundColor: theme.colors.negativeSubtle,
      borderColor: theme.colors.negative
    };
    const errorHover = {
      backgroundColor: theme.colors.negativeSubtle,
      borderColor: theme.colors.error
    };
    return {
      chromeHover: hover,
      chromeFocus: focus,
      chromeError: error,
      chromeErrorHover: errorHover
    };
  }, [theme]);
}
function Input({
  label,
  placeholder,
  value,
  onChangeText,
  onFocus,
  onBlur,
  isInvalid,
  inputRef,
  style,
  ...rest
}) {
  const theme = (0, _useTheme.useTheme)();
  const ctx = (0, _react.useContext)(Context);
  const withinRoot = Boolean(ctx.inputRef);
  const {
    chromeHover,
    chromeFocus,
    chromeError,
    chromeErrorHover
  } = useSharedInputStyles();
  if (!withinRoot) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
      isInvalid: isInvalid,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
        label: label,
        placeholder: placeholder,
        value: value,
        onChangeText: onChangeText,
        isInvalid: isInvalid,
        ...rest
      })
    });
  }
  const refs = (0, _mergeRefs.mergeRefs)([ctx.inputRef, inputRef].filter(ref => ref != null));
  const flattened = _reactNative.StyleSheet.flatten([_index.atoms.relative, _index.atoms.z_20, _index.atoms.flex_1, _index.atoms.text_md, {
    color: theme.colors.text
  }, _index.atoms.px_xs, {
    lineHeight: _index.atoms.text_md.fontSize * 1.2,
    textAlignVertical: rest.multiline ? 'top' : undefined,
    minHeight: rest.multiline ? 80 : undefined,
    minWidth: 0,
    paddingTop: 13,
    paddingBottom: 13
  }, (0, _index.android)({
    paddingTop: 8,
    paddingBottom: 9
  }), (0, _index.web)({
    paddingTop: 11,
    paddingBottom: 11,
    marginTop: 2,
    marginBottom: 2
  }), style]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
      accessibilityHint: undefined,
      hitSlop: {
        top: 20,
        bottom: 20,
        left: 20,
        right: 20
      },
      ...rest,
      accessibilityLabel: label,
      ref: refs,
      value: value,
      onChangeText: onChangeText,
      onFocus: e => {
        ctx.onFocus();
        onFocus?.(e);
      },
      onBlur: e => {
        ctx.onBlur();
        onBlur?.(e);
      },
      placeholder: placeholder === null ? undefined : placeholder || label,
      placeholderTextColor: theme.colors.textSecondary,
      keyboardAppearance: theme.mode === 'light' ? 'light' : 'dark',
      style: flattened
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [_index.atoms.z_10, _index.atoms.absolute, _index.atoms.inset_0, {
        borderRadius: 10
      }, {
        backgroundColor: theme.colors.contrast50
      }, {
        borderColor: 'transparent',
        borderWidth: 2
      }, ctx.hovered ? chromeHover : {}, ctx.focused ? chromeFocus : {}, ctx.isInvalid || isInvalid ? chromeError : {}, (ctx.isInvalid || isInvalid) && (ctx.hovered || ctx.focused) ? chromeErrorHover : {}]
    })]
  });
}
function LabelText({
  nativeID,
  children
}) {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
    nativeID: nativeID,
    style: [_index.atoms.text_sm, _index.atoms.font_medium, {
      color: theme.colors.textSecondary
    }, _index.atoms.mb_sm],
    children: children
  });
}
function Icon({
  icon: Comp
}) {
  const theme = (0, _useTheme.useTheme)();
  const ctx = (0, _react.useContext)(Context);
  const {
    hover,
    focus,
    errorHover,
    errorFocus
  } = (0, _react.useMemo)(() => {
    const hover = {
      color: theme.colors.text
    };
    const focus = {
      color: theme.colors.primary
    };
    const errorHover = {
      color: theme.colors.error
    };
    const errorFocus = {
      color: theme.colors.error
    };
    return {
      hover,
      focus,
      errorHover,
      errorFocus
    };
  }, [theme]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [_index.atoms.z_20, _index.atoms.pr_xs],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
      size: "md",
      style: [{
        color: theme.colors.textSecondary,
        pointerEvents: 'none',
        flexShrink: 0
      }, ctx.hovered ? hover : {}, ctx.focused ? focus : {}, ctx.isInvalid && ctx.hovered ? errorHover : {}, ctx.isInvalid && ctx.focused ? errorFocus : {}]
    })
  });
}
function SuffixText({
  children,
  label,
  accessibilityHint,
  style
}) {
  const theme = (0, _useTheme.useTheme)();
  const ctx = (0, _react.useContext)(Context);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
    accessibilityLabel: label,
    accessibilityHint: accessibilityHint,
    numberOfLines: 1,
    style: _reactNative.StyleSheet.flatten([_index.atoms.z_20, _index.atoms.pr_sm, _index.atoms.text_md, {
      color: theme.colors.textSecondary
    }, _index.atoms.pointer_events_none, (0, _index.web)({
      marginTop: -2,
      lineHeight: _index.atoms.text_md.fontSize * 1.3
    }), ctx.hovered || ctx.focused ? {
      color: theme.colors.text
    } : undefined, style]),
    children: children
  });
}
function GhostText({
  children,
  value
}) {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [_index.atoms.pointer_events_none, _index.atoms.absolute, _index.atoms.z_10, (0, _index.platform)({
      native: {
        paddingLeft: _index.tokens.space.md + _index.tokens.space.xl + _index.tokens.space.xs + _index.tokens.space.xs
      },
      web: {
        paddingLeft: _index.tokens.space.xl + _index.tokens.space.xs + _index.tokens.space.xs
      }
    }), (0, _index.web)({
      paddingRight: _index.tokens.space.md
    }), _index.atoms.overflow_hidden, _index.atoms.max_w_full],
    "aria-hidden": true,
    accessibilityElementsHidden: true,
    importantForAccessibility: "no-hide-descendants",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.Text, {
      style: [{
        color: 'transparent'
      }, _index.atoms.text_md, {
        lineHeight: _index.atoms.text_md.fontSize * 1.1875
      }, _index.atoms.w_full],
      numberOfLines: 1,
      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
        style: [{
          color: theme.colors.textTertiary
        }, _index.atoms.text_md, {
          lineHeight: _index.atoms.text_md.fontSize * 1.1875
        }],
        children: value
      })]
    })
  });
}
//# sourceMappingURL=index.js.map