// Metro module 13724 (f13725).
import { memo, useCallback, useMemo } from "react";
import { View } from "react-native";
import { isProfileEffectRecord } from "../../records/ProfileEffectRecord";
import { SAMPLE_PROFILE_ASPECT_RATIO } from "../../native/CollectiblesPreviewConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
import { NONE_ITEM, SHOP_ITEM } from "../useProfileEffectSections";
import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import useProfileEffect from "../useProfileEffect";
import FastImage from "../../../../components_native/common/FastImage";
import Module8695 from "../../../../_bundle/Module8695";
import ProfileEffect from "./ProfileEffect";
let Component;
const useStyles = createStyles({
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: GUTTER_SIZE
  },
  rowSpacer: {
    height: GUTTER_SIZE
  },
  profileEffect: {
    overflow: "hidden",
    width: "100%",
    height: "100%"
  },
  sampleProfile: {
    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
    width: "100%"
  }
});
const r46 = memo((a0) => {
  const { items, selectedSkuId, setSelectedProfileEffect, guildId, isTryItOut: isTryItOut2 = false } = a0;
  const isTryItOut = isTryItOut2;
  const size = a0.size;
  const styles = useStyles();
  const callback = useCallback(() => {
    setSelectedProfileEffect(null);
  }, [setSelectedProfileEffect]);
  return <>
    <View style={styles.row}>
      {[...items, null, null].slice(0, ROW_SIZE).map((a0, index) => {
        if (a0 === NONE_ITEM) {
          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
        }
        if (a0 === SHOP_ITEM) {
          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET} />;
        }
        if (isProfileEffectRecord(a0)) {
          return <Component key={a0.skuId} item={a0} isSelected={selectedSkuId === a0.skuId} setSelectedProfileEffect={setSelectedProfileEffect} isTryItOut={isTryItOut} size={size} />;
        }
        return <View key={index} style={{
          height: size,
          width: size
        }} />;
      })}
    </View>
    <View style={styles.rowSpacer} />
  </>;
});
r46.displayName = "EditProfileEffectRow";
Component = memo(({ item, isSelected, setSelectedProfileEffect: setSelectedProfileEffect2, isTryItOut: isTryItOut2 = false, size: size2 }) => {
  const styles = useStyles();
  const profileEffect = useProfileEffect(item.skuId);
  let c20671_2 = profileEffect;
  return <EditCollectiblesListItemProduct skuId={item.skuId} isSelected={isSelected} onPress={useCallback(() => {
    setSelectedProfileEffect2(item);
  }, [setSelectedProfileEffect2, item])} isTryItOut={isTryItOut2} size={size2} accessibilityLabel={profileEffect?.accessibilityLabel}>
    <View style={[styles.profileEffect, {
      borderRadius: 6
    }]} accessible={false} importantForAccessibility="no">
      <FastImage source={{
        uri: Module8695
      }} style={styles.sampleProfile} resizeMode="cover" />
      <ProfileEffect skuId={item.skuId} bannerAdjustment={0} useThumbnail thumbnailUrlOverride={useMemo(() => c20671_2?.thumbnailPreviewSrc == null ? c20671_2?.thumbnailPreviewSrc : `${c20671_2.thumbnailPreviewSrc}?width=100&height=195`, [profileEffect?.thumbnailPreviewSrc])} />
    </View>
  </EditCollectiblesListItemProduct>;
});
Component.displayName = "EditProfileEffectItem";
export { r46 as EditProfileEffectRow };