// Metro module 15142 (f15143).
import { useCallback, useMemo } from "react";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import GuildPowerupsStore from "../GuildPowerupsStore";
import { GUILD_THEME_POWERUP_BOOST_PRICE } from "../constants/GuildPowerupsConstants";
import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { GUILD_POWERUP_GUILD_THEME_SKU_ID } from "../../../../_bundle/Module4080";
import { getGuildPowerupBannerImage } from "../hooks/useGetGuildPowerupBannerImage";
import Module15143 from "../../../../_bundle/Module15143";
import useGuildPowerupsBoostCount from "../hooks/useGuildPowerupsBoostCount";
import { openApplyBoostModal } from "../../../../actions/native/BoostingActionCreators";
import { intl, t } from "../../../../intl/index.native";
import GuildPowerups_messages from "../GuildPowerups.messages";
import GuildPowerupsImage from "./GuildPowerupsImage";
import { useCoachmark } from "../../../../design/components/Coachmark/native/useCoachmark.native";
const useStyles = createStyles({
  coachmarkImage: {
    height: 120,
    width: 260 - 2 * Module712.space.PX_16,
    borderRadius: Module712.radii.md
  }
});
export default function GuildThemeMemberCoachmark({ guildId, targetRef, markAsDismissed }) {
  let stateFromStores, imageUrl, c21705_5, callback, callback2;
  stateFromStores = void 0;
  imageUrl = void 0;
  c21705_5 = void 0;
  callback = void 0;
  callback2 = void 0;
  const styles = useStyles();
  const stateFromStores2 = useStateFromStores([GuildPowerupsStore], () => {
    const stateForGuild = GuildPowerupsStore.getStateForGuild(guildId);
    return stateForGuild == null ? void 0 : stateForGuild.allPowerups[GUILD_POWERUP_GUILD_THEME_SKU_ID];
  }, [guildId]);
  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  let r31 = getGuildPowerupBannerImage(stateFromStores2, stateFromStores, true);
  if (r31 == null) {
    r31 = Module15143;
  }
  imageUrl = r31;
  const r15 = GUILD_THEME_POWERUP_BOOST_PRICE - useGuildPowerupsBoostCount(guildId).available;
  c21705_5 = r15;
  callback = useCallback(() => {
    markAsDismissed(ContentDismissActionType.USER_DISMISS);
  }, [markAsDismissed]);
  callback2 = useCallback(() => {
    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
    if (c21705_5 > 0) {
      openApplyBoostModal(guildId);
    }
  }, [r15, guildId, markAsDismissed]);
  useCoachmark(targetRef, useMemo(() => ({
    title: intl.string(GuildPowerups_messages.RK6NbY),
    description: intl.string(GuildPowerups_messages.xlAqGk),
    visible: true,
    position: "bottom",
    offsetY: 8,
    onDismiss: callback,
    renderImgComponent: () => <GuildPowerupsImage imageUrl={imageUrl} isAnimated={!stateFromStores} style={styles.coachmarkImage} />,
    buttonLabel: intl.string(t.oPAx73),
    buttonVariant: "primary",
    onButtonPress: callback2
  }), [callback, callback2, imageUrl, styles.coachmarkImage, stateFromStores]));
  return null;
};