import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { mergeClassNameProps, Modal } from "@powerhousedao/design-system";
import { useEffect, useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
const buttonStyles = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all";
export function ReadRequiredModal(props) {
    const { body, header, children, onOpenChange, onContinue, closeLabel, overlayProps, contentProps, bodyProps = {}, headerProps = {}, containerProps = {}, continueButtonProps = {}, buttonContainerProps = {}, ...restProps } = props;
    const [disableClose, setDisableClose] = useState(true);
    const contentRef = useRef(null);
    useEffect(() => {
        const checkScroll = () => {
            const element = contentRef.current;
            if (element) {
                if (element.scrollHeight > element.clientHeight) {
                    setDisableClose(true);
                    element.addEventListener("scroll", handleScroll);
                }
                else {
                    setDisableClose(false);
                }
            }
        };
        const handleScroll = () => {
            const element = contentRef.current;
            if (element &&
                element.scrollHeight - Math.ceil(element.scrollTop) ===
                    element.clientHeight) {
                setDisableClose(false);
            }
        };
        requestAnimationFrame(checkScroll);
        return () => {
            const element = contentRef.current;
            if (element) {
                element.removeEventListener("scroll", handleScroll);
            }
        };
    }, []);
    return (_jsx(Modal, { contentProps: {
            ...contentProps,
            className: twMerge("rounded-3xl outline-none", contentProps?.className),
        }, onOpenChange: onOpenChange, overlayProps: {
            ...overlayProps,
            className: overlayProps?.className,
        }, ...restProps, children: _jsxs("div", { ...mergeClassNameProps(containerProps, "w-[500px] p-6 text-slate-300"), children: [_jsx("div", { ...mergeClassNameProps(headerProps, "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800"), children: header }), _jsxs("div", { ref: contentRef, ...mergeClassNameProps(bodyProps, "my-6 max-h-[245px] overflow-scroll rounded-md bg-slate-50 p-4 text-center"), children: [body, children] }), _jsx("div", { ...mergeClassNameProps(buttonContainerProps, "mt-8 flex justify-between gap-3"), children: _jsx("button", { disabled: disableClose, onClick: onContinue, ...mergeClassNameProps(continueButtonProps, twMerge(buttonStyles, "flex-1 bg-gray-800 text-gray-50", disableClose &&
                            "cursor-not-allowed bg-gray-300 hover:scale-100")), children: closeLabel }) })] }) }));
}
//# sourceMappingURL=read-required-modal.js.map