import { jsx as _jsx } from "react/jsx-runtime";
import { ChevronDown } from "@tamagui/lucide-icons";
import { createContext, useContext, useEffect, useMemo, useState } from "react";
import { TextInput } from "react-native";
import { View, createStyledContext, styled, withStaticProperties } from "tamagui";
import { Icon } from "./Icon.native.js";
import { Spinner } from "./Spinner.native.js";
import { Body } from "./typography.native.js";
var FocusContext = /* @__PURE__ */createContext({
    focused: !1,
    hasValue: !1,
    setHasValue: function () {}
  }),
  StyledContext = createStyledContext({
    focused: !1,
    error: !1,
    disabled: !1,
    loading: !1
  }),
  Container = styled(View, {
    name: "Text",
    context: StyledContext,
    height: 56,
    minWidth: 200,
    maxWidth: 350,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    pos: "relative",
    disabledStyle: {
      o: 0.4,
      pointerEvents: "none"
    },
    marginTop: 12,
    hoverStyle: {
      brc: "$onSurface",
      btc: "$onSurface",
      bbc: "$onSurface",
      blc: "$onSurface"
    },
    variants: {
      error: {
        true: {
          brc: "$error",
          btc: "$error",
          bbc: "$error",
          blc: "$error",
          hoverStyle: {
            brc: "$onErrorContainer",
            btc: "$onErrorContainer",
            bbc: "$onErrorContainer",
            blc: "$onErrorContainer"
          },
          focusStyle: {
            brc: "$error",
            btc: "$error",
            bbc: "$error",
            blc: "$error"
          }
        }
      },
      disabled: {
        true: {
          brc: "$onSurface",
          btc: "$onSurface",
          bbc: "$onSurface",
          blc: "$onSurface",
          pointerEvents: "none"
        }
      },
      focused: {
        true: {
          brc: "$primary",
          btc: "$primary",
          bbc: "$primary",
          blc: "$primary",
          borderWidth: 2
        }
      },
      variant: {
        outlined: {
          bc: "transparent",
          brc: "$outline",
          btc: "$outline",
          bbc: "$outline",
          blc: "$outline",
          borderWidth: 1,
          borderRadius: "$shape.corner_xs",
          focusStyle: {
            bw: "$0.5"
          }
        }
      }
    },
    defaultVariants: {
      variant: "outlined"
    }
  }),
  Frame = styled(View, {
    name: "InputFrame",
    context: StyledContext
  }),
  FameHOC = Frame.styleable(function (props, ref) {
    var [focused, setFocused] = useState(!1),
      [hasValue, setHasValue] = useState(!1),
      value = useMemo(function () {
        return {
          focused,
          hasValue,
          setHasValue
        };
      }, [focused, hasValue]);
    return /* @__PURE__ */_jsx(FocusContext.Provider, {
      value,
      children: /* @__PURE__ */_jsx(Frame, {
        ref,
        ...props,
        hasValue,
        focused,
        onFocus: function () {
          setFocused(!0);
        },
        onBlur: function () {
          setFocused(!1);
        }
      })
    });
  }),
  Label = styled(Body, {
    name: "InputLabel",
    context: StyledContext,
    size: "large",
    col: "$onSurfaceVariant",
    pointerEvents: "none",
    hoverStyle: {
      col: "$onSurface"
    },
    focusable: !0,
    left: 16,
    top: 56 / 2 - 12,
    pos: "absolute",
    animateOnly: ["top", "left", "px", "fontSize", "fow"],
    animation: "medium",
    variants: {
      error: {
        true: {
          col: "red",
          hoverStyle: {
            col: "$onErrorContainer"
          }
        }
      },
      disabled: {
        true: {
          opacity: 0.38
        }
      },
      focused: {
        true: {
          col: "$primary",
          size: "medium",
          top: -20,
          left: -1
        }
      },
      hasValue: {
        true: {
          col: "$primary",
          size: "medium",
          top: -20,
          left: -1
        }
      }
    }
  }),
  LabelHOC = Label.styleable(function (props, ref) {
    var {
        focused,
        hasValue
      } = useContext(FocusContext),
      {
        error
      } = useContext(StyledContext);
    return /* @__PURE__ */_jsx(Label, {
      ref,
      ...props,
      focused,
      hasValue,
      error
    });
  }),
  InputText = styled(TextInput, {
    name: "InputText",
    context: StyledContext,
    paddingLeft: 16,
    fg: 1,
    variants: {
      error: {
        true: {
          col: "$error"
        }
      }
    }
  }),
  InputTextHOC = InputText.styleable(function (props, ref) {
    var {
      setHasValue
    } = useContext(FocusContext);
    return useEffect(function () {
      setHasValue(!!props.value || !!props.placeHolder);
    }, [props.value, props.placeHolder]), /* @__PURE__ */_jsx(InputText, {
      ...props,
      ref
    });
  }),
  SupportingText = styled(Body, {
    name: "InputSupportingText",
    context: StyledContext,
    size: "small",
    col: "$onSurfaceVariant",
    marginLeft: 16,
    marginTop: 4,
    hoverStyle: {
      col: "$onSurfaceVariant"
    },
    variants: {
      disabled: {
        true: {
          opacity: 0.38,
          col: "$onSurface"
        }
      },
      error: {
        true: {
          col: "$error",
          hoverStyle: {
            col: "$error"
          }
        }
      },
      focused: {
        true: {
          col: "$onSurfaceVariant"
        }
      }
    }
  }),
  SupportTextHOC = SupportingText.styleable(function (props, ref) {
    var {
      focused
    } = useContext(FocusContext);
    return /* @__PURE__ */_jsx(SupportingText, {
      ...props,
      ref,
      focused
    });
  }),
  InputSpinner = styled(Spinner, {
    name: "InputSpinner",
    context: StyledContext,
    height: 24,
    marginLeft: 16,
    marginRight: 12,
    display: "none",
    variants: {
      loading: {
        true: {
          display: "block"
        }
      }
    }
  }),
  InputCaret = styled(ChevronDown, {
    name: "InputCaret",
    context: StyledContext,
    // height: 24,
    // animateOnly: ["transform"],
    // animation: "medium",
    variants: {
      focused: {
        true: {
          transform: "rotate(180deg)"
        }
      }
    }
  }),
  HOCInputCaret = InputCaret.styleable(function (props, ref) {
    var {
      focused
    } = useContext(FocusContext);
    return /* @__PURE__ */_jsx(View, {
      marginLeft: 16,
      marginRight: 12,
      children: /* @__PURE__ */_jsx(InputCaret, {
        ...props,
        ref,
        focused
      })
    });
  }),
  TrailingIcon = styled(Icon, {
    name: "InputTrailingIcon",
    context: StyledContext,
    marginLeft: 16,
    marginRight: 12,
    variants: {
      loading: {
        true: {
          display: "none"
        }
      },
      error: {
        true: {
          col: "$error"
        }
      }
    }
  }),
  Input = withStaticProperties(FameHOC, {
    Props: StyledContext.Provider,
    Text: InputTextHOC,
    TrailingIcon,
    Container,
    Label: LabelHOC,
    SupportingText: SupportTextHOC,
    Spinner: InputSpinner,
    InputCaret: HOCInputCaret
  });
export { Input };
//# sourceMappingURL=Input.native.js.map
