"use client";
import { cnb } from "cnbuilder";
import { useEffect, useState } from "react";
import { useSsr } from "../SsrProvider.js";
import { randomSkeletonPlaceholder, skeletonPlaceholder } from "./skeletonPlaceholderUtils.js";
/**
 * @example Simple Example
 * ```tsx
 * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
 * import { type ReactElement } from "react";
 *
 * export default function UsingTheHookExample(): ReactElement {
 *   const { style, className } = useSkeletonPlaceholder();
 *   return <div style={style} className={className} />;
 * }
 * ```
 *
 * @see {@link https://react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}
 * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
 * @since 6.0.0
 */ export function useSkeletonPlaceholder(options = {}) {
    const { style: propStyle, className, height, width: propWidth, disabled = false, delay: propDelay, minDelay, maxDelay, minPercentage, maxPercentage } = options;
    const ssr = useSsr();
    const isDefinedWidth = typeof propWidth !== "undefined";
    const isDefinedDelay = typeof propDelay !== "undefined";
    const [randomStyles, setRandomStyles] = useState(()=>{
        if (typeof window === "undefined" || ssr || disabled) {
            return {};
        }
        return randomSkeletonPlaceholder({
            minDelay,
            maxDelay,
            minPercentage,
            maxPercentage
        });
    });
    useEffect(()=>{
        if (!ssr || disabled || isDefinedDelay && isDefinedWidth) {
            return;
        }
        setRandomStyles(randomSkeletonPlaceholder({
            minDelay,
            maxDelay,
            minPercentage,
            maxPercentage
        }));
    }, [
        disabled,
        isDefinedDelay,
        isDefinedWidth,
        maxDelay,
        maxPercentage,
        minDelay,
        minPercentage,
        ssr
    ]);
    let width = propWidth;
    let animationDelay = propDelay;
    if (!disabled) {
        if (!isDefinedDelay) {
            ({ animationDelay } = randomStyles);
        }
        if (!isDefinedWidth) {
            ({ width } = randomStyles);
        }
    }
    let style = propStyle;
    if (!!width || !!animationDelay || typeof height !== "undefined") {
        style = {
            ...style,
            height: height ?? style?.height,
            width: width ?? style?.width,
            // Note: not including MozAnimationDelay and WebkitAnimationDelay since
            // they weren't applied when they were set. Probably no longer required?
            animationDelay: animationDelay ?? style?.animationDelay
        };
    }
    return {
        style,
        className: cnb(className, !disabled && skeletonPlaceholder())
    };
}

//# sourceMappingURL=useSkeletonPlaceholder.js.map