// Metro module 8097 (f8098).
import { useMemo } from "react";
import { View, StyleSheet } from "react-native";
import { useFramePreviewOverrideStore } from "./tooling/FramePreviewOverrideStore";
import { PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO, PROFILE_FRAME_Z_INDEX } from "./ProfileFrameConstants";
import { UserProfileThemeTypes } from "../../../user_profile/native/Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import useProfileFrameLayerAsset from "./useProfileFrameLayerAsset";
import FastImage from "../../../../components_native/common/FastImage";
import scaleProfileFrame from "../scaleProfileFrame";
import FramePreviewOverrideFrame from "./tooling/FramePreviewOverrideFrame";
let useStyles, LiveProfileFrame;
const ProfileFrameLayer = function ProfileFrameLayer(props) {
  const { skuId, layer, overflowTop, overflowBottom, overflowHorizontal, containerWidth: containerWidth2, containerHeight: containerHeight2 } = props;
  const styles = useStyles();
  const width = containerWidth2 + 2 * overflowHorizontal;
  const profileFrameLayerAsset = useProfileFrameLayerAsset({
    skuId,
    layer,
    width
  });
  const { assetUrl, imageHeight } = profileFrameLayerAsset;
  const memo = useMemo(() => {
    const r1 = {
      left: -overflowHorizontal,
      right: -overflowHorizontal,
      zIndex: PROFILE_FRAME_Z_INDEX[layer.order]
    };
    const type = layer.type;
    if (type === "staple") {
      return {
        ...r1,
        top: layer.anchor === "top" ? -overflowTop : void 0,
        bottom: layer.anchor === "bottom" ? -overflowBottom : void 0
      };
    }
    if (type === "rail") {
      return {
        ...r1,
        justifyContent: layer.anchor !== "center" ? layer.anchor === "top" ? "flex-start" : "flex-end" : "center"
      };
    }
    return {
      ...r1,
      left: -overflowHorizontal
    };
  }, [layer.anchor, layer.type, layer.order, overflowTop, overflowBottom, overflowHorizontal]);
  const r1 = layer.responsive === true && layer.type === "rail" && containerHeight2 != null && containerWidth2 / containerHeight2 >= PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO;
  if (imageHeight !== 0 && assetUrl != null && !r1) {
    if (layer.type === "border") {
      if (containerHeight2 != null && containerHeight2 !== 0) {
        return <View style={[styles.layer, memo]}>
          {Array.from({
            length: Math.ceil(containerHeight2 / imageHeight)
          }, (a0, a1) => <FastImage key={a1} source={{
            uri: assetUrl
          }} resizeMode="cover" width={width} height={imageHeight} />)}
        </View>;
      }
      return null;
    }
    return <View style={[styles.layer, memo]}>
      <FastImage source={{
        uri: assetUrl
      }} resizeMode="cover" width={width} height={imageHeight} />
    </View>;
  }
  return null;
};
LiveProfileFrame = function LiveProfileFrame(props) {
  let overflowTop2, overflowBottom2, overflowHorizontal2;
  const { frame, containerWidth, containerHeight, profileThemeType, frameOrder, filterLayer } = props;
  overflowTop2 = void 0;
  overflowBottom2 = void 0;
  overflowHorizontal2 = void 0;
  const styles = useStyles();
  const memo = useMemo(() => frame.layers.filter((layer) => {
    let r1 = frameOrder == null || frameOrder === layer.order;
    if (r1) {
      const r0 = filterLayer != null && !filterLayer(layer);
      r1 = r0 ? !r0 : profileThemeType === UserProfileThemeTypes.PREVIEW || layer.anchor === "top" && layer.type === "staple";
    }
    return r1;
  }), [frame.layers, frameOrder, profileThemeType, filterLayer]);
  if (memo.length !== 0 && containerWidth !== 0) {
    const r24 = scaleProfileFrame(frame, containerWidth);
    overflowTop2 = r24.overflowTop;
    overflowBottom2 = r24.overflowBottom;
    overflowHorizontal2 = r24.overflowHorizontal;
    return <View style={styles.container}>
      {memo.map((item) => <ProfileFrameLayer key={item.id} skuId={frame.skuId} layer={item} overflowTop={overflowTop2} overflowBottom={overflowBottom2} overflowHorizontal={overflowHorizontal2} containerWidth={containerWidth} containerHeight={containerHeight} />)}
    </View>;
  }
  return null;
};
useStyles = createStyles({
  container: {
    ...StyleSheet.absoluteFillObject,
    pointerEvents: "none"
  },
  layer: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
    overflow: "hidden"
  }
});
export default function ProfileFrame(props) {
  const framePreviewOverrideStore = useFramePreviewOverrideStore((a0) => a0.override);
  return framePreviewOverrideStore != null ? <FramePreviewOverrideFrame override={framePreviewOverrideStore} {...props} /> : <LiveProfileFrame {...props} />;
};