// Metro module 13733 (f13734).
import * as Module19 from "react";
import { useCallback, useMemo } from "react";
import { View } from "react-native";
import { isNameplateRecord } from "../../records/NameplateRecord";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
import { NONE_ITEM, SHOP_ITEM } from "../useNameplateSections";
import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import { getNameplateData } from "../utils";
import Nameplate from "./Nameplate";
let Component;
const useStyles = createStyles({
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: GUTTER_SIZE
  },
  rowSpacer: {
    height: GUTTER_SIZE
  },
  nameplate: {
    overflow: "hidden"
  }
});
const r42 = Module19.memo(({ items, selectedSkuId, setSelectedNameplate, guildId, size }) => {
  const styles = useStyles();
  const callback = useCallback(() => {
    setSelectedNameplate(null);
  }, [setSelectedNameplate]);
  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_NAMEPLATE_SHEET} />;
        }
        if (isNameplateRecord(item)) {
          return <Component key={item.skuId} nameplate={item} isSelected={selectedSkuId === item.skuId} setSelectedNameplate={setSelectedNameplate} size={size} />;
        }
        return <View key={index} style={{
          height: size,
          width: size
        }} />;
      })}
    </View>
    <View style={styles.rowSpacer} />
  </>;
});
r42.displayName = "EditNameplateRow";
Component = Module19.memo(({ nameplate, isSelected, setSelectedNameplate: setSelectedNameplate2, size: size2 }) => {
  const styles = useStyles();
  const memo = useMemo(() => getNameplateData(nameplate), [nameplate]);
  return <EditCollectiblesListItemProduct skuId={nameplate.skuId} isSelected={isSelected} onPress={useCallback(() => {
    setSelectedNameplate2(nameplate);
  }, [setSelectedNameplate2, nameplate])} size={size2} accessibilityLabel={nameplate.label}>
    <Nameplate nameplate={memo} fullOpacity isSquarePreview style={[styles.nameplate, {
      borderRadius: 6
    }]} />
  </EditCollectiblesListItemProduct>;
});
Component.displayName = "EditNameplateItem";
export { r42 as EditNameplateRow };