import { useAtomValue } from "@effect/atom-react";import { useMemo, useState } from "react";import { ActivityIndicator, Image, Pressable, View } from "react-native";import ImageViewing from "react-native-image-viewing";import { AsyncResult } from "effect/unstable/reactivity"; import { AppText as Text } from "../../components/AppText";import { EmptyState } from "../../components/EmptyState";import { workspaceFileImageAtom } from "./workspace-file-image-cache"; function ResolvedWorkspaceFileImagePreview(props: {  readonly accessibilityLabel: string;  readonly uri: string;}) {  const [loadError, setLoadError] = useState<string | null>(null);  const [fullScreenVisible, setFullScreenVisible] = useState(false);  const imageSource = useMemo(    () => ({ uri: props.uri, cache: "force-cache" as const }),    [props.uri],  );  const fullScreenImages = useMemo(() => [imageSource], [imageSource]);   return (    <View className="relative flex-1 bg-subtle">      <Pressable        accessibilityRole="button"        accessibilityLabel={`Open full-screen preview of ${props.accessibilityLabel}`}        disabled={loadError !== null}        className="flex-1 p-4 active:bg-subtle-strong"        onPress={() => setFullScreenVisible(true)}      >        <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.");          }}        />      </Pressable>       {loadError !== null ? (        <View className="absolute inset-0 items-center justify-center bg-card px-6">          <EmptyState title="Image unavailable" detail={loadError} />        </View>      ) : null}       <ImageViewing        images={fullScreenImages}        imageIndex={0}        visible={fullScreenVisible}        onRequestClose={() => setFullScreenVisible(false)}        swipeToCloseEnabled        doubleTapToZoomEnabled      />    </View>  );} function CachedWorkspaceFileImagePreview(props: {  readonly accessibilityLabel: string;  readonly uri: string;}) {  const imageAtom = useMemo(() => workspaceFileImageAtom(props.uri), [props.uri]);  const imageResult = useAtomValue(imageAtom);   if (AsyncResult.isFailure(imageResult)) {    return (      <View className="flex-1 items-center justify-center bg-card px-6">        <EmptyState          title="Image unavailable"          detail="The image could not be loaded into the local cache."        />      </View>    );  }   if (!AsyncResult.isSuccess(imageResult)) {    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">Loading image...</Text>      </View>    );  }   return (    <ResolvedWorkspaceFileImagePreview      accessibilityLabel={props.accessibilityLabel}      uri={imageResult.value}    />  );} export function WorkspaceFileImagePreview(props: {  readonly accessibilityLabel: string;  readonly uri: string | null;}) {  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 (    <CachedWorkspaceFileImagePreview      accessibilityLabel={props.accessibilityLabel}      uri={props.uri}    />  );}