"use client";
import { __rest } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import Image from 'next/image';
import { useState, useEffect } from 'react';
import { themeSvgIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
import { cn } from '@windrun-huaiin/lib/utils';
import { SnakeLoadingFrame } from './snake-loading-frame.mjs';

var _a;
const ENV_DELAY_ENABLED = process.env.NEXT_PUBLIC_DELAYED_IMG_ENABLED === "true";
const rawDelaySeconds = (_a = process.env.NEXT_PUBLIC_DELAYED_IMG_SECONDS) !== null && _a !== void 0 ? _a : "0";
const parsedDelaySeconds = Number(rawDelaySeconds);
const ENV_DELAY_MS = Number.isFinite(parsedDelaySeconds) && parsedDelaySeconds > 0
    ? parsedDelaySeconds * 1000
    : 0;
function DelayedImg(_a) {
    var { alt, wrapperClassName, placeholderClassName, className, onLoad } = _a, imageProps = __rest(_a, ["alt", "wrapperClassName", "placeholderClassName", "className", "onLoad"]);
    const shouldDelay = ENV_DELAY_ENABLED && ENV_DELAY_MS > 0;
    const [isMounted, setIsMounted] = useState(!shouldDelay);
    const [isLoaded, setIsLoaded] = useState(false);
    useEffect(() => {
        if (!shouldDelay || isMounted) {
            return;
        }
        const timer = window.setTimeout(() => {
            setIsMounted(true);
        }, ENV_DELAY_MS);
        return () => window.clearTimeout(timer);
    }, [isMounted, shouldDelay]);
    return (jsxs("div", { className: cn("relative", wrapperClassName), children: [(!isMounted || !isLoaded) && (jsx(SnakeLoadingFrame, { shape: "rounded-rect", loading: true, themeColor: themeSvgIconColor, strokeWidth: 3, className: cn("absolute inset-0 rounded-[inherit] border shadow-sm bg-white/70 dark:bg-white/5", themeBgColor, placeholderClassName), contentClassName: "h-full w-full", children: jsx("div", { "aria-hidden": "true", className: "absolute inset-0 rounded-[inherit] bg-white/20 dark:bg-white/0" }) })), isMounted && (jsx(Image, Object.assign({}, imageProps, { alt: alt, onLoad: (event) => {
                    setIsLoaded(true);
                    onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
                }, className: cn("transition duration-300", isLoaded ? "opacity-100" : "opacity-0", className) })))] }));
}

export { DelayedImg };
