import { ChevronDown, Info } from "@truststack/icons-ui";
import {
  createContext,
  forwardRef,
  useContext,
  useEffect,
  useMemo,
  useState
} from "react";
import {
  Input as TInput,
  View,
  createStyledContext,
  styled,
  withStaticProperties
} from "tamagui";
import { Icon } from "./Icon";
import { Spinner } from "./Spinner";
import { CompactTooltip } from "./Tooltip";
import { Body } from "./typography";
import { jsx } from "react/jsx-runtime";
const FocusContext = createContext({
  focused: !1,
  hasValue: !1,
  setHasValue: () => {
  }
}), StyledContext = createStyledContext({
  focused: !1,
  error: !1,
  disabled: !1,
  loading: !1,
  fluid: !0,
  density: "0",
  focusable: !0
}), Container = styled(View, {
  name: "Text",
  context: StyledContext,
  minHeight: 56,
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  position: "relative",
  marginTop: 16,
  marginBottom: 16,
  cursor: "pointer",
  disabledStyle: {
    o: 0.4
  },
  group: "input",
  hoverStyle: {
    brc: "$onSurface",
    btc: "$onSurface",
    bbc: "$onSurface",
    blc: "$onSurface"
  },
  variants: {
    fluid: {
      true: {
        maxWidth: void 0,
        minWidth: void 0
      },
      false: {
        maxWidth: 350,
        minWidth: 200
      }
    },
    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"
        }
      },
      false: {}
    },
    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"
        }
      }
    },
    density: {
      0: {
        minHeight: 56,
        marginTop: 16,
        marginBottom: 16
      },
      "-1": {
        minHeight: 52,
        marginTop: 12,
        marginBottom: 12
      },
      "-2": {
        minHeight: 48,
        marginTop: 8,
        marginBottom: 8
      },
      "-3": {
        minHeight: 40,
        marginTop: 4,
        marginBottom: 4
      }
    },
    // No supporting text or label, remove padding
    bare: {
      true: {
        marginTop: 0,
        marginBottom: 0
      }
    }
  },
  defaultVariants: {
    variant: "outlined"
  }
}), Frame = styled(View, {
  name: "InputFrame",
  context: StyledContext,
  variants: {
    loading: {
      true: {},
      false: {}
    },
    density: {
      0: {},
      "-1": {},
      "-2": {},
      "-3": {}
    }
  }
}), FameHOC = Frame.styleable((props, ref) => {
  const [focused, setFocused] = useState(!1), [hasValue, setHasValue] = useState(!1), value = useMemo(
    () => ({ focused, hasValue, setHasValue }),
    [focused, hasValue]
  );
  return /* @__PURE__ */ jsx(FocusContext.Provider, { value, children: /* @__PURE__ */ jsx(
    Frame,
    {
      ref,
      ...props,
      onFocus: () => {
        setFocused(!0);
      },
      onBlur: () => {
        setFocused(!1);
      }
    }
  ) });
}), Label = styled(Body, {
  name: "InputLabel",
  context: StyledContext,
  size: "large",
  col: "$onSurfaceVariant",
  pointerEvents: "none",
  hoverStyle: {
    col: "$onSurface"
  },
  focusable: !1,
  left: 16,
  top: 56 / 2 - 12,
  pos: "absolute",
  animateOnly: ["top", "left", "px", "fontSize", "fow"],
  animation: "medium",
  variants: {
    error: {
      true: {
        col: "red",
        hoverStyle: {
          col: "$onErrorContainer"
        }
      },
      false: {}
    },
    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((props, ref) => {
  const { focused, hasValue } = useContext(FocusContext), { error, focusable } = useContext(StyledContext);
  return /* @__PURE__ */ jsx(
    Label,
    {
      ref,
      ...props,
      focused: focusable && focused,
      hasValue,
      error: !!error
    }
  );
}), InputText = styled(TInput, {
  name: "InputText",
  context: StyledContext,
  padding: 16,
  minWidth: 0,
  fg: 1,
  flexBasis: 0,
  focusStyle: {
    borderWidth: 0,
    outlineStyle: "none"
  },
  backgroundColor: "transparent",
  color: "$onSurface",
  placeholderTextColor: "$onSurface",
  variants: {
    error: {
      true: {
        col: "$error"
      },
      false: {}
    },
    density: {
      0: {},
      "-1": {
        padding: 12
      },
      "-2": {
        padding: 8
      },
      "-3": {
        padding: 4
      }
    }
  }
}), InputTextHOC = InputText.styleable(({ multiline, ...props }, ref) => {
  let minHeight = 48, maxHeight = 96;
  const context = useContext(StyledContext.context);
  context.density === "-1" ? (minHeight = 44, maxHeight = 92) : context.density === "-2" ? (minHeight = 40, maxHeight = 88) : context.density === "-3" && (minHeight = 36, maxHeight = 84);
  const [inputHeight, setInputHeight] = useState(minHeight), { setHasValue } = useContext(FocusContext);
  useEffect(() => {
    if (props.value == "") {
      setHasValue(!1);
      return;
    }
    setHasValue(props.value == 0 || !!props.value || !!props.placeHolder);
  }, [props.value, props.placeHolder, ref]);
  const onContentSizeChange = (event) => {
    multiline && setInputHeight(event.nativeEvent.contentSize.height);
  };
  return context.focusable ? /* @__PURE__ */ jsx(
    InputText,
    {
      ...props,
      ref,
      value: props.value == null ? "" : props.value,
      placeholder: props.value,
      minHeight,
      maxHeight,
      height: Math.max(minHeight, inputHeight),
      onContentSizeChange,
      editable: context.focusable,
      borderWidth: 0.5,
      borderColor: "transparent"
    }
  ) : /* @__PURE__ */ jsx(
    View,
    {
      f: 1,
      minHeight,
      maxHeight,
      height: Math.max(minHeight, inputHeight),
      ai: "flex-start",
      jc: "center",
      p: 16,
      children: /* @__PURE__ */ jsx(Body, { children: props.value })
    }
  );
}), SupportingText = styled(Body, {
  name: "InputSupportingText",
  context: StyledContext,
  size: "small",
  col: "$onSurfaceVariant",
  left: 16,
  bottom: 0,
  pos: "absolute",
  hoverStyle: {
    col: "$onSurfaceVariant"
  },
  textOverflow: "ellipsis",
  numberOfLines: 1,
  ellipse: !0,
  variants: {
    disabled: {
      true: {
        opacity: 0.38,
        col: "$onSurface"
      }
    },
    error: {
      true: {
        col: "$error",
        hoverStyle: {
          col: "$error"
        }
      },
      false: {}
    },
    focused: {
      true: {
        col: "$onSurfaceVariant"
      }
    }
  }
}), SupportTextHOC = SupportingText.styleable((props, ref) => {
  const { 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"
      }
    },
    density: {
      0: {},
      "-1": {
        height: 20,
        marginLeft: 12,
        marginRight: 8
      },
      "-2": {
        height: 16,
        marginLeft: 8,
        marginRight: 4
      },
      "-3": {
        height: 12,
        marginLeft: 4,
        marginRight: 2
      }
    }
  }
}), InputCaret = styled(ChevronDown, {
  name: "InputCaret",
  context: StyledContext,
  size: 24,
  animateOnly: ["transform"],
  animation: "medium",
  variants: {
    focused: {
      true: {
        transform: "rotate(180deg)"
      }
    },
    density: {
      0: {},
      "-1": {
        size: 20
      },
      "-2": {
        size: 16
      },
      "-3": {
        size: 12
      }
    }
  }
}), HOCInputCaret = InputCaret.styleable((props, ref) => {
  const { 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,
  marginRight: 12,
  col: "$onSurfaceVariant",
  variants: {
    loading: {
      true: {
        display: "none"
      }
    },
    error: {
      true: {
        col: "$error"
      },
      false: {}
    },
    density: {
      0: {},
      "-1": {
        marginRight: 8
      },
      "-2": {
        marginRight: 6
      },
      "-3": {
        marginRight: 4
      }
    }
  }
}), InputAdornment = styled(Body, {
  name: "InputSpinner",
  context: StyledContext,
  marginRight: 12,
  col: "$onSurfaceVariant",
  variants: {
    disabled: {
      true: {
        opacity: 0.38,
        col: "$onSurface"
      }
    },
    error: {
      true: {
        col: "$error",
        hoverStyle: {
          col: "$error"
        }
      },
      false: {}
    },
    focused: {
      true: {
        col: "$onSurfaceVariant"
      }
    },
    density: {
      0: {},
      "-1": {
        marginRight: 8
      },
      "-2": {
        marginRight: 6
      },
      "-3": {
        marginRight: 4
      }
    }
  }
}), Tooltip = forwardRef(({ label }, ref) => {
  const { focused } = useContext(FocusContext);
  return /* @__PURE__ */ jsx(View, { mr: "$shape.corner_m", ref, children: /* @__PURE__ */ jsx(CompactTooltip, { label, children: /* @__PURE__ */ jsx(Icon, { Icon: Info, color: focused ? "$primary" : "$onSurfaceVariant" }) }) });
}), Input = withStaticProperties(FameHOC, {
  Props: StyledContext.Provider,
  Text: InputTextHOC,
  TrailingIcon,
  Container,
  Label: LabelHOC,
  SupportingText: SupportTextHOC,
  Spinner: InputSpinner,
  InputCaret: HOCInputCaret,
  Adornment: InputAdornment,
  Tooltip
});
export {
  Input
};
//# sourceMappingURL=Input.js.map
