// Metro module 13693 (f13694).
import { useCallback } from "react";
import { View } from "react-native";
import UserProfileSettingsStore from "../UserProfileSettingsStore";
import { AnalyticsObjects, UPLOAD_BANNER_SIZE } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import PremiumUtils from "../../../utils/PremiumUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import UploadUtils from "../../../utils/native/UploadUtils";
import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
import { intl, t } from "../../../intl/index.native";
import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { FormLabel, FormSubLabel } from "../../../design/void/Form/native/index";
import UserProfileUpsellButton from "./UserProfileUpsellButton";
import { useStateFromStoresObject } from "../../../_bundle/Module589";
import { getPendingAvatarSrc } from "../../recent_avatars/RecentAvatarUtils";
import useDisplayProfile from "../hooks/useDisplayProfile";
import { useDominantColorFromImage, memoizedImageSource } from "../../calls/native/VideoBackground";
import { rgb2int, int2hex } from "../../../_bundle/int2hslRaw";
import { setPendingChanges } from "../UserProfileSettingsActionCreators";
import showCustomColorPickerActionSheet from "../../color_picker/native/showCustomColorPickerActionSheet";
import ColorBlock from "../../../components_native/common/color_picker/ColorBlock";
import { Text } from "../../../design/components/Text/native/Text";
import { Icon } from "../../../design/void/native";
import Module13702 from "../../../_bundle/Module13702";
let useStyles;
const ChangeBannerColorRow = function ChangeBannerColorRow(props) {
  let c20640_0, color, callback;
  const user = props.user;
  c20640_0 = void 0;
  color = void 0;
  callback = void 0;
  const styles = useStyles();
  const stateFromStoresObject = useStateFromStoresObject([UserProfileSettingsStore], () => UserProfileSettingsStore.getPendingChanges());
  const pendingAvatar = stateFromStoresObject.pendingAvatar;
  let pendingAccentColor = stateFromStoresObject.pendingAccentColor;
  let r12 = getPendingAvatarSrc({
    userId: user.id,
    image: pendingAvatar
  });
  const displayProfile = useDisplayProfile(user.id);
  if (r12 == null) {
    r12 = user.getAvatarURL(void 0, 80);
  }
  const r47 = rgb2int(useDominantColorFromImage(r12, memoizedImageSource(r12)));
  c20640_0 = r47;
  if (pendingAccentColor === void 0) {
    pendingAccentColor = displayProfile?.primaryColor;
  }
  if (pendingAccentColor == null) {
    pendingAccentColor = r47;
  }
  if (pendingAccentColor == null) {
    pendingAccentColor = 0;
  }
  color = pendingAccentColor;
  callback = useCallback((a0) => {
    setPendingChanges({
      accentColor: a0 === c20640_0 ? null : a0
    });
  }, [r47]);
  return <TableRow label={<FormLabel style={styles.label} text={intl.string(t.xzNfPz)} />} trailing={<View style={styles.selectedColor}>
    <ColorBlock style={styles.bannerColor} color={color} />
    <Text style={styles.selectedColorHex} variant="text-md/medium" color="interactive-text-default">
      {int2hex(color)}
    </Text>
    <Icon style={styles.rowArrow} size={Icon.Sizes.CUSTOM} source={Module13702} />
  </View>} onPress={function handleChangeColor() {
    showCustomColorPickerActionSheet({
      color,
      onSelect: callback
    });
  }} />;
};
useStyles = createStyles({
  label: {
    color: Module712.colors.INTERACTIVE_TEXT_ACTIVE,
    alignItems: "center",
    flexDirection: "row"
  },
  sublabel: {
    color: Module712.colors.TEXT_DEFAULT
  },
  nitroWheel: {
    marginLeft: Module712.space.PX_8
  },
  bannerColor: {
    borderColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
    borderWidth: 1,
    borderRadius: Module712.radii.xs,
    height: 24,
    minWidth: 24
  },
  selectedColor: {
    flexDirection: "row",
    alignItems: "center"
  },
  selectedColorHex: {
    textTransform: "uppercase"
  },
  rowArrow: {
    height: 13,
    width: 8,
    marginLeft: 10,
    marginTop: 2
  },
  upsellButton: {
    marginTop: Module712.space.PX_8
  },
  remove: {
    color: Module712.colors.TEXT_FEEDBACK_CRITICAL
  },
  titleWrapper: {
    flex: 0
  },
  titleContainer: {
    justifyContent: "flex-start"
  }
});
export default function ChangeBannerActionSheet(props) {
  const { user, analyticsLocations, onBannerChange } = props;
  let removeText = props.removeText;
  let showRemoveBanner = props.showRemoveBanner;
  if (showRemoveBanner === void 0) {
    showRemoveBanner = false;
  }
  let isTryItOut = props.isTryItOut;
  if (isTryItOut === void 0) {
    isTryItOut = false;
  }
  let _handleBannerUploadSelect2 = function _handleBannerUploadSelect() {
    const r9 = async () => {
      let c30660_1;
      c30660_1 = void 0;
      ActionSheetActionCreators.hideActionSheet();
      let c31697_0 = await UploadUtils.openImagePicker(UPLOAD_BANNER_SIZE);
      let c31697_1 = c31697_0.base64;
      let c31697_2 = c31697_0.originalMd5;
      if (c31697_1 != null) {
        (0, onBannerChange)(c31697_1, c31697_2);
      }
    };
    _handleBannerUploadSelect2 = r9;
    return r9.apply(this, arguments);
  };
  const styles = useStyles();
  const analyticsLocations2 = useAnalyticsLocations(analyticsLocations).analyticsLocations;
  if (!isTryItOut) {
    isTryItOut = PremiumUtils.canUsePremiumProfileCustomization(user);
  }
  const r61 = [<BottomSheetTitleHeader title={intl.string(t.Vgdusv)} trailing={isTryItOut && <NitroWheelIcon />} titleWrapperStyle={styles.titleWrapper} titleContainerStyle={styles.titleContainer} />, ,];
  const r68 = [isTryItOut ? null : <ChangeBannerColorRow user={user} />, <TableRow label={<View style={styles.label}>
    <FormLabel text={showRemoveBanner ? intl.string(t.N0bC3P) : intl.string(t["70CYsY"])} />
    {isTryItOut ? !isTryItOut : <NitroWheelIcon style={styles.nitroWheel} size="sm" />}
  </View>} subLabel={<>
    <FormSubLabel style={styles.sublabel} numberOfLines={2} text={isTryItOut ? intl.string(t.IhzZlo) : intl.string(t.NSTmdO)} />
    {isTryItOut ? !isTryItOut : <View style={styles.upsellButton}>
      <UserProfileUpsellButton analyticsObject={AnalyticsObjects.EDIT_PROFILE_BANNER} />
    </View>}
  </>} onPress={isTryItOut ? function handleBannerUploadSelect() {
    return _handleBannerUploadSelect2.apply(this, arguments);
  } : void 0} />, ,];
  if (showRemoveBanner) {
    if (removeText == null) {
      removeText = intl.string(t.tT9n7D);
    }
    showRemoveBanner = <TableRow label={<FormLabel style={[styles.label, styles.remove]} text={removeText} />} onPress={function handleBannerDelete() {
      onBannerChange(null);
      ActionSheetActionCreators.hideActionSheet();
    }} />;
  }
  r68[2] = showRemoveBanner;
  r61[1] = <TableRowGroup hasIcons={false}>{r68}</TableRowGroup>;
  return <AnalyticsLocationProvider value={analyticsLocations2}>
    <ActionSheet>{r61}</ActionSheet>
  </AnalyticsLocationProvider>;
};