// Metro module 9687 (f9688).
import * as Module19 from "react";
import { useMemo } from "react";
import { Pressable, View, StyleSheet } from "react-native";
import UploadAttachmentStore from "../../../../stores/UploadAttachmentStore";
import { ALAssetsType, DeviceMediaType } from "../../../device/native/DeviceConstants";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { createStyles, createStyleProperties } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { hexWithOpacity } from "../../../../utils/ColorUtils";
import * as _native from "../../../../design/void/native";
import { ThumbnailImage } from "../../../../design/void/native";
import Module9630 from "../../../../_bundle/Module9630";
import { Text } from "../../../../design/components/Text/native/Text";
import { useStateFromStoresObject } from "../../../../_bundle/Module589";
import { doesImageMatchUpload } from "../../../../lib/uploader/UploadUtils";
import NativeMenuActionCreators from "../../../native_menu/native/NativeMenuActionCreators";
import { intl, t } from "../../../../intl/index.native";
import { getTimeFormat } from "../../../../utils/native/TimeUtils";
import { getType } from "../../../../utils/native/UploadUtils";
import { Caption } from "../../../media/native/Caption";
import Module9690 from "../../../../_bundle/Module9690";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import { CameraIcon } from "../../../../design/components/Icon/native/redesign/generated/CameraIcon";
import { ImageIcon } from "../../../../design/components/Icon/native/redesign/generated/ImageIcon";
import { AttachmentIcon } from "../../../../design/components/Icon/native/redesign/generated/AttachmentIcon";
function $mk83097($env) {
  return () => {
    let borderBottomRightRadius;
    const r7 = $env;
    const r11 = r7[2];
    const r10 = r11 !== 0 ? Math.floor((r11 - 1) / r7[1]) : 0;
    const r13 = Math;
    const r19 = r7[0];
    const r20 = r7[1];
    const r22 = r13.floor(r19 / r20);
    let marginLeft = 4;
    const r24 = {
      borderTopLeftRadius: r19 === 0 ? 16 : 4,
      borderTopRightRadius: (r11 >= r20 ? r19 === r20 - 1 : r19 === r11 - 1) ? 16 : 4,
      borderBottomLeftRadius: null,
      borderBottomRightRadius: null,
      marginLeft: null
    };
    const borderBottomLeftRadius = r22 === r10 ? r19 % r20 == 0 ? 16 : 4 : 4;
    L16: {
      r24.borderBottomLeftRadius = borderBottomLeftRadius;
      if (r19 !== r11 - 1) {
        const r33 = r11 % r20;
        borderBottomRightRadius = 4;
        if (r33 == 0) {
          break L16;
        }
        borderBottomRightRadius = r19 === (r10 - 1) * r20 + r20 - 1 ? 16 : 4;
      } else {
        borderBottomRightRadius = 16;
      }
    }
    r24.borderBottomRightRadius = borderBottomRightRadius;
    if (r19 % r20 == 0) {
      marginLeft = 0;
    }
    r24.marginLeft = marginLeft;
    return r24;
  };
}
let AnimatedComponent, useStyles, MediaKeyboardImage, MediaKeyboardDummy, styleProperties, __initData, MediaKeyboardSpecialButton;
const NewCaption = function NewCaption(props) {
  const { label, style, textStyle } = props;
  const styles = useStyles();
  return <View style={[styles.labelContainer, style]}>
    <_native.Icon source={Module9630} style={styles.icon} />
    <Text style={textStyle} color="text-overlay-light" variant="text-xs/bold">{label}</Text>
  </View>;
};
MediaKeyboardImage = function MediaKeyboardImage(props) {
  let r72, accessibilityLabel, disableWhenReachedLimit2, disabled2, index, numItemsPerRow, onLongPress2, onPress2, size2, styles, totalNumItems2, type, uploadCount, uploadLimit2;
  let draftType, item, channelId, onPressItem, onLongPressItem, includedUploadIds, image, isIncluded;
  L6: {
    draftType = props.draftType;
    item = props.item;
    index = props.index;
    totalNumItems2 = props.totalNumItems;
    numItemsPerRow = props.numItemsPerRow;
    size2 = props.size;
    channelId = props.channelId;
    onPressItem = props.onPressItem;
    onLongPressItem = props.onLongPressItem;
    disabled2 = props.disabled;
    includedUploadIds = props.includedUploadIds;
    uploadLimit2 = props.uploadLimit;
    disableWhenReachedLimit2 = props.disableWhenReachedLimit;
    image = void 0;
    isIncluded = void 0;
    styles = useStyles();
    const node = item.node;
    image = node.image;
    type = node.type;
    const stateFromStoresObject = useStateFromStoresObject([UploadAttachmentStore], () => {
      const r2 = {
        upload: UploadAttachmentStore.findUpload(channelId, draftType, (a0) => doesImageMatchUpload(image, a0) && (includedUploadIds == null || includedUploadIds.includes(a0.id))),
        uploadCount: null
      };
      let uploadCount = includedUploadIds?.length;
      if (uploadCount == null) {
        uploadCount = UploadAttachmentStore.getUploadCount(channelId, draftType);
      }
      r2.uploadCount = uploadCount;
      return r2;
    }, [channelId, draftType, image, includedUploadIds]);
    const upload = stateFromStoresObject.upload;
    uploadCount = stateFromStoresObject.uploadCount;
    isIncluded = upload != null;
    const memo = useMemo(() => ({
      onPress: () => {
        NativeMenuActionCreators.hideNativeMenu();
        onPressItem({
          channelId,
          item,
          isIncluded
        });
      },
      onLongPress: () => {
        NativeMenuActionCreators.hideNativeMenu();
        if (onLongPressItem != null) {
          onLongPressItem({
            channelId,
            item,
            isIncluded
          });
        }
      }
    }), [channelId, item, isIncluded, onPressItem, onLongPressItem]);
    onPress2 = memo.onPress;
    onLongPress2 = memo.onLongPress;
    if (ALAssetsType.PHOTO !== type && DeviceMediaType.IMAGE !== type) {
      if (ALAssetsType.VIDEO !== type) {
        const VIDEO = DeviceMediaType.VIDEO;
        accessibilityLabel = void 0;
        if (VIDEO !== type) {
          break L6;
        }
      }
      accessibilityLabel = intl.string(t.FlNoSV);
    } else {
      accessibilityLabel = intl.string(t.SkfkEJ);
    }
  }
  L13: {
    if (ALAssetsType.VIDEO !== type && DeviceMediaType.VIDEO !== type) {
      if (ALAssetsType.PHOTO !== type) {
        const IMAGE = DeviceMediaType.IMAGE;
        r72 = null;
        if (IMAGE !== type) {
          break L13;
        }
      }
      const type2 = getType(image.uri);
      r72 = null;
      if (type2 !== "image/gif") {
        break L13;
      }
      r72 = <Caption style={styles.mediaKeyboardItemLabelContainer} label="GIF" />;
    } else {
      r72 = <NewCaption label={getTimeFormat(image.playableDuration)} />;
    }
  }
  const disabled3 = isIncluded ? !isIncluded : uploadCount >= uploadLimit2 && disableWhenReachedLimit2 || disabled2;
  let env17407;
  const r111 = <ReanimatedRexport.View style={styles.checkIconContainer}>
    <_native.Icon source={Module9690} disableColor={false} color={styles.checkIcon.color} style={styles.checkIcon} />
  </ReanimatedRexport.View>;
  const r112 = env17407 = {};
  env17407[0] = index;
  env17407[1] = numItemsPerRow;
  env17407[2] = totalNumItems2;
  return <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
    selected: isIncluded
  }} onPress={onPress2} onLongPress={onLongPress2} disabled={disabled3} style={[styles.imageContainer, disabled3 ? styles.imageDisabled : void 0, useMemo($mk83097(r112), [index, numItemsPerRow, totalNumItems2])]}>
    <ThumbnailImage resizeMode="cover" resizeMethod="resize" style={[styles.image, {
      height: size2,
      width: size2
    }]} source={{
      uri: image.uri,
      width: size2,
      height: size2,
      cache: "force-cache"
    }} localImageSource={{
      uri: image.uri,
      width: size2,
      height: size2
    }} />
    {r72}
    {isIncluded ? <View style={[styles.selectedOverlay, {
      height: size2,
      width: size2
    }]} /> : null}
    {isIncluded ? r111 : null}
  </Pressable>;
};
MediaKeyboardDummy = function MediaKeyboardDummy(props) {
  const { size: size2, isFirstInRow } = props;
  const styles = useStyles();
  return <View style={[styles.imageContainer, isFirstInRow ? !isFirstInRow : {
    marginLeft: 4
  }]}>
    <View style={[styles.image, {
      height: size2,
      width: size2
    }]} />
  </View>;
};
MediaKeyboardSpecialButton = function MediaKeyboardSpecialButton(props) {
  let env17409;
  const { size: size2, onPress: onPress2, disabled: disabled2, accessibilityLabel, children, index, totalNumItems: totalNumItems2, numItemsPerRow } = props;
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  const r27 = styleProperties();
  const { backgroundColor, pressedBackgroundColor } = r27;
  const h = function h() {
    return {
      backgroundColor: _timing.withTiming(_ReanimatedRexport.interpolateColor(sharedValue.get(), [0, 1], [backgroundColor, pressedBackgroundColor]), {
        duration: 200,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.quad)
      })
    };
  };
  h.__closure = {
    withTiming: _timing.withTiming,
    interpolateColor: _ReanimatedRexport.interpolateColor,
    pressed: sharedValue,
    backgroundColor,
    pressedBackgroundColor,
    Easing: _ReanimatedRexport.Easing
  };
  h.__workletHash = 15924448581794;
  h.__initData = __initData;
  const animatedStyle = useAnimatedStyle(h);
  const r42 = env17409 = {};
  env17409[0] = index;
  env17409[1] = numItemsPerRow;
  env17409[2] = totalNumItems2;
  return <AnimatedComponent disabled={disabled2} accessibilityRole="button" accessibilityLabel={accessibilityLabel} onPressIn={() => {
    sharedValue.set(1);
  }} onPressOut={() => {
    sharedValue.set(0);
  }} onPress={onPress2} style={[animatedStyle, styles.imageContainer, styles.specialButton, {
    width: size2,
    height: size2
  }, useMemo($mk83097(r42), [index, numItemsPerRow, totalNumItems2]), disabled2 ? styles.disabled : void 0]}>{children}</AnimatedComponent>;
};
AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
useStyles = createStyles({
  container: {
    flexDirection: "row",
    paddingHorizontal: 12,
    alignItems: "center"
  },
  image: {
    backgroundColor: Module712.colors.MOBILE_KEYBOARD_PANEL_BACKGROUND
  },
  imageContainer: {
    borderRadius: Module712.radii.xs,
    overflow: "hidden",
    position: "relative"
  },
  labelContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.PRIMARY_700, 0.6),
    borderRadius: Module712.radii.xs,
    paddingHorizontal: 5,
    paddingVertical: 4,
    position: "absolute",
    left: 8,
    bottom: 8
  },
  mediaKeyboardItemLabelContainer: {
    right: 10
  },
  icon: {
    width: 12,
    height: 12,
    tintColor: Module712.colors.WHITE,
    marginEnd: 4
  },
  checkIcon: {
    width: 14,
    height: 14,
    color: Module712.colors.BACKGROUND_BRAND
  },
  checkIconContainer: {
    width: 24,
    height: 24,
    position: "absolute",
    justifyContent: "center",
    alignItems: "center",
    right: 6,
    top: 6,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.WHITE,
    borderWidth: 1,
    borderColor: hexWithOpacity(Module712.unsafe_rawColors.BLACK, 0.1)
  },
  selectedOverlay: {
    ...StyleSheet.absoluteFillObject,
    borderRadius: Module712.radii.xs,
    backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.BLACK, 0.3)
  },
  specialButton: {
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    gap: 8
  },
  disabled: {
    opacity: 0.4
  },
  imageDisabled: {
    opacity: 0.2
  }
});
styleProperties = createStyleProperties({
  backgroundColor: Module712.colors.CONTROL_SECONDARY_BACKGROUND_DEFAULT,
  pressedBackgroundColor: Module712.colors.CONTROL_SECONDARY_BACKGROUND_ACTIVE
});
__initData = {
  code: "function MediaKeyboardItemTsx1(){const{withTiming,interpolateColor,pressed,backgroundColor,pressedBackgroundColor,Easing}=this.__closure;return{backgroundColor:withTiming(interpolateColor(pressed.get(),[0,1],[backgroundColor,pressedBackgroundColor]),{duration:200,easing:Easing.out(Easing.quad)})};}"
};
const r134 = Module19.memo(function({ items, channel, draftType: draftType2, onPressItem: onPressItem2, onLongPressItem: onLongPressItem2, rowIndex, totalNumItems, numPerRow, includedUploadIds: includedUploadIds2, uploadLimit, disableWhenReachedLimit, handleCameraPress, handleAttachPress, handleViewAllPhotosPress, disabled }) {
  const styles = useStyles();
  const size = (useWindowDimensions_native().width - (24 + 4 * (numPerRow - 1))) / numPerRow;
  let c17410_12 = {
    camera: {
      text: t.uje3P9,
      onPress: handleCameraPress,
      Icon: CameraIcon
    },
    allphotos: {
      text: t.Zmm6dN,
      onPress: handleViewAllPhotosPress,
      Icon: ImageIcon
    },
    attach: {
      text: t["8Hvr3+"],
      onPress: handleAttachPress,
      Icon: AttachmentIcon
    }
  };
  return <View style={styles.container}>
    {items.map((a0, a1) => {
      if (a0 == null) {
        return <MediaKeyboardDummy key={a1} size={size} isFirstInRow={a1 === 0} />;
      }
      if ("type" in a0 && ["allphotos", "attach", "camera"].includes(a0.type)) {
        const r35 = c17410_12[a0.type];
        return <MediaKeyboardSpecialButton key={a1} size={size} onPress={r35.onPress} disabled={disabled} accessibilityLabel={intl.string(r35.text)} index={rowIndex * numPerRow + a1} totalNumItems={totalNumItems} numItemsPerRow={numPerRow}>
          <r35.Icon color={Module712.colors.ICON_SUBTLE} size="lg" />
        </MediaKeyboardSpecialButton>;
      }
      return <MediaKeyboardImage key={a1} channelId={channel.id} draftType={draftType2} index={rowIndex * numPerRow + a1} totalNumItems={totalNumItems} numItemsPerRow={numPerRow} item={a0} includedUploadIds={includedUploadIds2} uploadLimit={uploadLimit} disableWhenReachedLimit={disableWhenReachedLimit} size={size} onPressItem={onPressItem2} onLongPressItem={onLongPressItem2} disabled={disabled} />;
    })}
  </View>;
});
export default r134;
export const PARENT_PADDING = 24;
export const CHILD_PADDING = 4;
export const SEPARATOR_SIZE = 4;
export function isMediaCameraNode(a0) {
  return "type" in a0 && a0.type === "camera";
}
export function isAttachFilesNode(a0) {
  return "type" in a0 && a0.type === "attach";
}
export function isViewAllPhotosNode(a0) {
  return "type" in a0 && a0.type === "allphotos";
}
export function isSpecialMediaGridNode(a0) {
  return "type" in a0 && ["allphotos", "attach", "camera"].includes(a0.type);
}