// Metro module 13728 (f13729).
import { memo, useCallback } from "react";
import { View } from "react-native";
import { isProfileFrameRecord } from "../../records/ProfileFrameRecord";
import { PROFILE_FRAME_ASPECT_RATIO } from "./ProfileFrameConstants";
import Module712 from "../../../../_bundle/Module712";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
import { NONE_ITEM, SHOP_ITEM } from "../hooks/useProfileFrameSections";
import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import ProfileFrameSamplePreview from "./previews/ProfileFrameSamplePreview";
let Component;
const PX_8 = Module712.space.PX_8;
const useStyles = createStyles({
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: GUTTER_SIZE
  },
  rowSpacer: {
    height: GUTTER_SIZE
  },
  previewContainer: {
    width: "100%",
    height: "100%",
    paddingVertical: PX_8,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center"
  }
});
const r49 = memo(({ items, selectedSkuId, setSelectedProfileFrame, guildId, size }) => {
  const styles = useStyles();
  const callback = useCallback(() => {
    setSelectedProfileFrame(null);
  }, [setSelectedProfileFrame]);
  return <>
    <View style={styles.row}>
      {[...items, null, null].slice(0, ROW_SIZE).map((item, index) => {
        if (item === NONE_ITEM) {
          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
        }
        if (item === SHOP_ITEM) {
          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_FRAME_SHEET} />;
        }
        if (isProfileFrameRecord(item)) {
          return <Component key={item.skuId} profileFrame={item} isSelected={selectedSkuId === item.skuId} setSelectedProfileFrame={setSelectedProfileFrame} size={size} />;
        }
        return <View key={index} style={{
          height: size,
          width: size
        }} />;
      })}
    </View>
    <View style={styles.rowSpacer} />
  </>;
});
r49.displayName = "EditProfileFrameRow";
Component = memo(({ profileFrame, isSelected, setSelectedProfileFrame: setSelectedProfileFrame2, size: size2 }) => {
  const styles = useStyles();
  return <EditCollectiblesListItemProduct skuId={profileFrame.skuId} isSelected={isSelected} onPress={useCallback(() => {
    setSelectedProfileFrame2({
      skuId: profileFrame.skuId,
      type: profileFrame.type
    });
  }, [setSelectedProfileFrame2, profileFrame])} size={size2} accessibilityLabel={profileFrame.label}>
    <View style={styles.previewContainer}>
      <ProfileFrameSamplePreview profileFrame={profileFrame} previewWidth={size2 * PROFILE_FRAME_ASPECT_RATIO} previewHeight={size2 - 2 * PX_8} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
    </View>
  </EditCollectiblesListItemProduct>;
});
Component.displayName = "EditProfileFrameItem";
export { r49 as EditProfileFrameRow };