import { useId, useMemo, useState } from "react";import { ActivityIndicator, Image, Pressable, View } from "react-native"; import { AppText as Text } from "../../components/AppText";import { EmptyState } from "../../components/EmptyState";import { FilePreviewModal, type FilePreviewSource } from "../../components/FilePreviewModal";import { PresentationSource } from "../../components/NativePresentation";import { useMediaActions, type MediaActionsSource } from "../../lib/mediaActions";import { MediaActionsMenu } from "../../components/MediaActionsMenu"; function ResolvedWorkspaceFileImagePreview(props: {  readonly accessibilityLabel: string;  readonly uri: string;  readonly actionsSource?: MediaActionsSource;}) {  const [loadError, setLoadError] = useState<string | null>(null);  const [preview, setPreview] = useState<FilePreviewSource | null>(null);  const sourceIdentifier = useId();  const mediaActions = useMediaActions(props.actionsSource);  const imageSource = useMemo(    () => ({ uri: props.uri, cache: "force-cache" as const }),    [props.uri],  );   return (    <View className="relative flex-1 bg-subtle">      <MediaActionsMenu media={mediaActions} style={{ flex: 1 }}>        <Pressable          accessibilityRole="button"          accessibilityLabel={`Open full-screen preview of ${props.accessibilityLabel}`}          accessibilityHint={            mediaActions.actions.length > 0 ? "Touch and hold for media actions" : undefined          }          disabled={loadError !== null}          className="flex-1 p-4 active:bg-subtle-strong"          onPress={() =>            setPreview({              kind: "image",              uri: props.uri,              name: props.accessibilityLabel,              sourceIdentifier,              actionsSource: props.actionsSource,            })          }        >          <PresentationSource identifier={sourceIdentifier} style={{ flex: 1 }}>            <Image              accessible={false}              source={imageSource}              className="h-full w-full"              resizeMode="contain"              onLoadStart={() => setLoadError(null)}              onError={(event) => {                setLoadError(event.nativeEvent.error || "The image could not be rendered.");              }}            />          </PresentationSource>        </Pressable>      </MediaActionsMenu>      {loadError !== null ? (        <View          pointerEvents="none"          className="absolute inset-0 items-center justify-center bg-card px-6"        >          <EmptyState title="Image unavailable" detail={loadError} />        </View>      ) : null}      <FilePreviewModal source={preview} onRequestClose={() => setPreview(null)} />    </View>  );} export function WorkspaceFileImagePreview(props: {  readonly accessibilityLabel: string;  readonly uri: string | null;  readonly actionsSource?: MediaActionsSource;}) {  if (props.uri === null) {    return (      <View className="flex-1 items-center justify-center gap-3 bg-card px-6">        <ActivityIndicator />        <Text className="text-center text-sm text-foreground-muted">          Preparing image preview...        </Text>      </View>    );  }   return (    <ResolvedWorkspaceFileImagePreview      accessibilityLabel={props.accessibilityLabel}      uri={props.uri}      actionsSource={props.actionsSource}    />  );}