"use strict";

import { createContext, useContext, useMemo, useRef } from 'react';
import { Platform, StyleSheet, TextInput, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { useInteractionState } from "../hooks/useInteractionState.js";
import { mergeRefs } from "../hooks/mergeRefs.js";
import { atoms as a, web, android, platform, tokens } from "../styles/index.js";
import { Text } from "../typography/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Context = /*#__PURE__*/createContext({
  inputRef: null,
  isInvalid: false,
  hovered: false,
  onHoverIn: () => {},
  onHoverOut: () => {},
  focused: false,
  onFocus: () => {},
  onBlur: () => {}
});
Context.displayName = 'TextFieldContext';
export function Root({
  children,
  isInvalid = false,
  style
}) {
  const inputRef = useRef(null);
  const {
    state: hovered,
    onIn: onHoverIn,
    onOut: onHoverOut
  } = useInteractionState();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = useInteractionState();
  const context = useMemo(() => ({
    inputRef,
    hovered,
    onHoverIn,
    onHoverOut,
    focused,
    onFocus,
    onBlur,
    isInvalid
  }), [inputRef, hovered, onHoverIn, onHoverOut, focused, onFocus, onBlur, isInvalid]);
  return /*#__PURE__*/_jsx(Context.Provider, {
    value: context,
    children: /*#__PURE__*/_jsx(View, {
      style: [a.flex_row, a.align_center, a.relative, a.w_full, a.px_md, style],
      ...(Platform.OS === 'web' ? {
        onClick: () => inputRef.current?.focus(),
        onMouseOver: onHoverIn,
        onMouseOut: onHoverOut
      } : undefined),
      children: children
    })
  });
}
export function useSharedInputStyles() {
  const theme = useTheme();
  return 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]);
}
export function Input({
  label,
  placeholder,
  value,
  onChangeText,
  onFocus,
  onBlur,
  isInvalid,
  inputRef,
  style,
  ...rest
}) {
  const theme = useTheme();
  const ctx = useContext(Context);
  const withinRoot = Boolean(ctx.inputRef);
  const {
    chromeHover,
    chromeFocus,
    chromeError,
    chromeErrorHover
  } = useSharedInputStyles();
  if (!withinRoot) {
    return /*#__PURE__*/_jsx(Root, {
      isInvalid: isInvalid,
      children: /*#__PURE__*/_jsx(Input, {
        label: label,
        placeholder: placeholder,
        value: value,
        onChangeText: onChangeText,
        isInvalid: isInvalid,
        ...rest
      })
    });
  }
  const refs = mergeRefs([ctx.inputRef, inputRef].filter(ref => ref != null));
  const flattened = StyleSheet.flatten([a.relative, a.z_20, a.flex_1, a.text_md, {
    color: theme.colors.text
  }, a.px_xs, {
    lineHeight: a.text_md.fontSize * 1.2,
    textAlignVertical: rest.multiline ? 'top' : undefined,
    minHeight: rest.multiline ? 80 : undefined,
    minWidth: 0,
    paddingTop: 13,
    paddingBottom: 13
  }, android({
    paddingTop: 8,
    paddingBottom: 9
  }), web({
    paddingTop: 11,
    paddingBottom: 11,
    marginTop: 2,
    marginBottom: 2
  }), style]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(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__*/_jsx(View, {
      style: [a.z_10, a.absolute, a.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 : {}]
    })]
  });
}
export function LabelText({
  nativeID,
  children
}) {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(Text, {
    nativeID: nativeID,
    style: [a.text_sm, a.font_medium, {
      color: theme.colors.textSecondary
    }, a.mb_sm],
    children: children
  });
}
export function Icon({
  icon: Comp
}) {
  const theme = useTheme();
  const ctx = useContext(Context);
  const {
    hover,
    focus,
    errorHover,
    errorFocus
  } = 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__*/_jsx(View, {
    style: [a.z_20, a.pr_xs],
    children: /*#__PURE__*/_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 : {}]
    })
  });
}
export function SuffixText({
  children,
  label,
  accessibilityHint,
  style
}) {
  const theme = useTheme();
  const ctx = useContext(Context);
  return /*#__PURE__*/_jsx(Text, {
    accessibilityLabel: label,
    accessibilityHint: accessibilityHint,
    numberOfLines: 1,
    style: StyleSheet.flatten([a.z_20, a.pr_sm, a.text_md, {
      color: theme.colors.textSecondary
    }, a.pointer_events_none, web({
      marginTop: -2,
      lineHeight: a.text_md.fontSize * 1.3
    }), ctx.hovered || ctx.focused ? {
      color: theme.colors.text
    } : undefined, style]),
    children: children
  });
}
export function GhostText({
  children,
  value
}) {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(View, {
    style: [a.pointer_events_none, a.absolute, a.z_10, platform({
      native: {
        paddingLeft: tokens.space.md + tokens.space.xl + tokens.space.xs + tokens.space.xs
      },
      web: {
        paddingLeft: tokens.space.xl + tokens.space.xs + tokens.space.xs
      }
    }), web({
      paddingRight: tokens.space.md
    }), a.overflow_hidden, a.max_w_full],
    "aria-hidden": true,
    accessibilityElementsHidden: true,
    importantForAccessibility: "no-hide-descendants",
    children: /*#__PURE__*/_jsxs(Text, {
      style: [{
        color: 'transparent'
      }, a.text_md, {
        lineHeight: a.text_md.fontSize * 1.1875
      }, a.w_full],
      numberOfLines: 1,
      children: [children, /*#__PURE__*/_jsx(Text, {
        style: [{
          color: theme.colors.textTertiary
        }, a.text_md, {
          lineHeight: a.text_md.fontSize * 1.1875
        }],
        children: value
      })]
    })
  });
}
//# sourceMappingURL=index.js.map