// Metro module 15782 (f15783).
import { useState, useRef, useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useToken } from "../../../design/tokens/native/useToken";
import { Icon } from "../../../design/void/native";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles, ToastContent;
const ToastIcon = function ToastIcon(props) {
  const { icon, IconComponent } = props;
  let iconColor = props.iconColor;
  const recolorLegacyIcon = props.recolorLegacyIcon;
  if (iconColor == null) {
    iconColor = "mobile-text-heading-primary";
  }
  const token = useToken(iconColor);
  const props2 = recolorLegacyIcon ? {
    color: token
  } : {
    disableColor: true
  };
  return IconComponent != null ? <IconComponent size="sm" color={token} /> : typeof icon === "function" ? <>
    {icon()}
  </> : icon != null ? <Icon resizeMode="contain" source={icon} {...props2} /> : null;
};
ToastContent = function ToastContent(props) {
  const { content, onTextLayout } = props;
  const styles = useStyles();
  return typeof content === "function" ? <View style={styles.contentContainer}>
    {content()}
  </View> : <Text onTextLayout={onTextLayout} style={styles.contentContainer} lineClamp={3} variant="text-sm/semibold" color="mobile-text-heading-primary">{content}</Text>;
};
useStyles = createStyles({
  container: {
    flexDirection: "row",
    alignItems: "center",
    borderRadius: Module712.radii.xxl,
    padding: Module712.space.PX_8,
    paddingRight: Module712.space.PX_12,
    backgroundColor: Module712.colors.MOBILE_TOAST_BACKGROUND_DEFAULT,
    borderColor: Module712.colors.BORDER_SUBTLE,
    borderWidth: 1,
    ...Module712.shadows.SHADOW_HIGH
  },
  multilineContainer: {
    paddingLeft: Module712.space.PX_12
  },
  contentContainer: {
    marginLeft: 8,
    flexShrink: 1
  }
});
export default function Toast(props) {
  const { icon, iconColor, IconComponent, content, containerStyle, recolorLegacyIcon } = props;
  const styles = useStyles();
  const [state, setState] = useState(false);
  const ref = useRef(false);
  return <View style={[styles.container, state ? styles.multilineContainer : null, containerStyle]} accessibilityElementsHidden>
    <ToastIcon icon={icon} iconColor={iconColor} IconComponent={IconComponent} recolorLegacyIcon={recolorLegacyIcon} />
    <ToastContent content={content} onTextLayout={useCallback((a0) => {
      if (!ref.current) {
        ref.current = true;
        setState(a0.nativeEvent.lines.length > 1);
      }
    }, [])} />
  </View>;
};