"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var utils = require('@windrun-huaiin/lib/utils');
var server = require('@windrun-huaiin/base-ui/components/server');
var ui = require('@windrun-huaiin/base-ui/ui');
var React = require('react');
var moneyPriceInteractive = require('../money-price/money-price-interactive.js');

function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
    const [open, setOpen] = React.useState(false);
    const [isMobile, setIsMobile] = React.useState(false);
    const triggerRef = React.useRef(null);
    const contentRef = React.useRef(null);
    const closeMenu = React.useCallback(() => setOpen(false), []);
    const [pricingModal, setPricingModal] = React.useState({
        open: false,
        mode: 'subscription',
    });
    const formattedBalance = React.useMemo(() => new Intl.NumberFormat(locale, {
        maximumFractionDigits: 0,
    }).format(totalBalance), [locale, totalBalance]);
    React.useEffect(() => {
        if (typeof window === 'undefined') {
            return;
        }
        const mediaQuery = window.matchMedia('(max-width: 640px)');
        const handleMatchChange = (event) => {
            setIsMobile(event ? event.matches : mediaQuery.matches);
        };
        handleMatchChange();
        mediaQuery.addEventListener('change', handleMatchChange);
        return () => {
            mediaQuery.removeEventListener('change', handleMatchChange);
        };
    }, []);
    React.useEffect(() => {
        if (!open || !isMobile) {
            return;
        }
        const shouldIgnoreTarget = (target) => (triggerRef.current && target && triggerRef.current.contains(target)) ||
            (contentRef.current && target && contentRef.current.contains(target));
        const handlePointerDown = (event) => {
            const target = event.target;
            if (shouldIgnoreTarget(target)) {
                return;
            }
            closeMenu();
        };
        const handleTouchStart = (event) => {
            const target = event.target;
            if (shouldIgnoreTarget(target)) {
                return;
            }
            closeMenu();
        };
        const supportsPointer = typeof window !== 'undefined' && 'PointerEvent' in window;
        if (supportsPointer) {
            document.addEventListener('pointerdown', handlePointerDown);
        }
        else {
            document.addEventListener('touchstart', handleTouchStart);
        }
        return () => {
            if (supportsPointer) {
                document.removeEventListener('pointerdown', handlePointerDown);
            }
            else {
                document.removeEventListener('touchstart', handleTouchStart);
            }
        };
    }, [open, isMobile, closeMenu]);
    React.useEffect(() => {
        if (typeof document === 'undefined') {
            return;
        }
        if (!open || !isMobile) {
            return;
        }
        const { body, documentElement } = document;
        const previousBodyOverflow = body.style.overflow;
        const previousHtmlOverflow = documentElement.style.overflow;
        body.style.overflow = 'hidden';
        documentElement.style.overflow = 'hidden';
        return () => {
            body.style.overflow = previousBodyOverflow;
            documentElement.style.overflow = previousHtmlOverflow;
        };
    }, [open, isMobile]);
    const openPricingModal = React.useCallback((payload) => {
        setPricingModal({
            open: true,
            mode: payload.mode,
            modalMoneyPriceData: payload.modalMoneyPriceData,
            pricingContext: payload.pricingContext,
        });
    }, []);
    const closePricingModal = React.useCallback(() => {
        setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open: false })));
    }, []);
    const contextValue = React.useMemo(() => ({
        close: closeMenu,
        isMobile,
        openPricingModal,
        closePricingModal,
    }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
    const isOnetimeModal = pricingModal.mode === 'onetime';
    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group mx-2  sm:mx-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
}
const CreditNavPopoverContext = React.createContext(null);
function useCreditNavPopover() {
    return React.useContext(CreditNavPopoverContext);
}

exports.CreditNavButton = CreditNavButton;
exports.useCreditNavPopover = useCreditNavPopover;
