import React, { useEffect, useState } from "react";
import { Image, Platform, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { resolveIcon } from "../services/favicon";
import { useUploadBlobUrl } from "../hooks/useUploadBlobUrl";
// react-native-web forwards `loading` and `decoding` to the underlying
// <img>; RN's TS types don't expose these props, so we cast through a
// Record<string, string> for the web branch.
const WEB_LAZY_PROPS = Platform.OS === "web" ? { loading: "lazy", decoding: "async" } : {};
/**
 * Per-item icon: shows the custom upload, falls back to the favicon
 * proxy, then to a generic globe glyph on a tile-toned square. Shared
 * between RN clients (mobile) and RN-Web (extension popup).
 */
export const ItemIcon = React.memo(function ItemIcon({ iconUrl, siteUrl, size = 40, imageSize, borderRadius, background, fallbackColor, faviconPath = "/favicon", uploadsPath = "/uploads", resolveUpload, }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const resolved = resolveIcon({ iconUrl, siteUrl, faviconPath });
    const uploadId = resolved.kind === "upload" ? resolved.uploadId : null;
    const upload = useUploadBlobUrl(uploadId, { uploadsPath, resolve: resolveUpload });
    const directUri = resolved.kind === "url" ? resolved.uri : null;
    const [urlErrored, setUrlErrored] = useState(false);
    useEffect(() => {
        setUrlErrored(false);
    }, [directUri]);
    const renderUri = uploadId ? upload.uri : directUri;
    const renderErrored = uploadId ? upload.errored : urlErrored;
    const onError = () => {
        if (uploadId) {
            upload.setErrored(true);
        }
        else {
            setUrlErrored(true);
        }
    };
    const tileBg = background ?? (isDark ? "rgb(38, 38, 38)" : "rgb(245, 245, 245)");
    const tileRadius = borderRadius ?? size * 0.25;
    const innerSize = imageSize ?? Math.round(size * 0.6);
    const globeColor = fallbackColor ?? (isDark ? "rgb(163, 163, 163)" : "rgb(115, 115, 115)");
    const showFallback = !renderUri || renderErrored;
    return (<View style={{
            width: size,
            height: size,
            borderRadius: tileRadius,
            backgroundColor: tileBg,
            alignItems: "center",
            justifyContent: "center",
            overflow: "hidden",
        }}>
      {showFallback ? (<Ionicons name="globe-outline" size={Math.round(innerSize * 0.85)} color={globeColor}/>) : (<Image source={{ uri: renderUri ?? "" }} style={{ width: innerSize, height: innerSize }} resizeMode="contain" onError={onError} accessibilityIgnoresInvertColors {...WEB_LAZY_PROPS}/>)}
    </View>);
});
//# sourceMappingURL=item-icon.jsx.map