// Metro module 15620 (f15621).
import { useMemo } from "react";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import { isYouNavFloating } from "../../main_tabs_v2/native/tabs/you/YouNavFloatingExperiment";
import Module712 from "../../../_bundle/Module712";
import { intl, t } from "../../../intl/index.native";
import { useCoachmark } from "../../../design/components/Coachmark/native/useCoachmark.native";
let useStyles;
const CoachmarkImg = function CoachmarkImg(props) {
  const { source, decorationAsset: decorationAsset2 } = props;
  return <Avatar style={useStyles().image} source={source} avatarDecoration={{
    asset: decorationAsset2
  }} size={AvatarSizes.XXLARGE} />;
};
useStyles = createStyles({
  image: {
    marginTop: 12
  }
});
export default function ShopCoachmark({ buttonRef, markAsDismissed, visible, title, description, avatarSrc, decorationAsset, navigateToShop, renderImgComponent }) {
  useCoachmark(buttonRef, useMemo(() => {
    const position = isYouNavFloating() ? "top" : "bottom";
    const offsetY = isYouNavFloating() ? Module712.space.PX_12 : void 0;
    let renderImgComponent2 = renderImgComponent;
    if (renderImgComponent == null) {
      renderImgComponent2 = () => <CoachmarkImg source={avatarSrc} decorationAsset={decorationAsset} />;
    }
    return {
      title,
      description,
      onDismiss: () => {
        markAsDismissed(ContentDismissActionType.USER_DISMISS);
      },
      visible,
      position,
      offsetY,
      renderImgComponent: renderImgComponent2,
      buttonLabel: intl.string(t.fYfGgK),
      buttonVariant: "primary",
      onButtonPress: navigateToShop
    };
  }, [avatarSrc, decorationAsset, description, renderImgComponent, markAsDismissed, title, visible, navigateToShop]));
  return null;
};