import { Menu, Transition } from '@headlessui/react';
import React, { Fragment, useMemo, useRef } from 'react';
import { useMeasuredHeight } from '../hook/useMeasuredHeight';
import { useWindowHeight } from '../hook/useWindowHeight';
import NotiBellButton from './NotiBellButton';
import NotiHeader from './NotiHeader';
import NotiListPane from './NotiListPane';
export default function NotiDropdown({ animated, noti, onClose, onOpen, open, previewDeps, previewModalData, setPreviewModalData, unreadCount, }) {
    const isPreview = !!previewModalData;
    const headerRef = useRef(null);
    const tabsRef = useRef(null);
    const headerH = useMeasuredHeight(headerRef, 56);
    const tabsH = useMeasuredHeight(tabsRef, 56);
    const vh = useWindowHeight();
    // menu height: list vs preview
    // menu height: luôn theo LIST (kể cả khi preview)
    const listMenuH = useMemo(() => {
        var _a, _b;
        if (!open)
            return null;
        const contentH = (_b = (_a = animated.getHeightPx) === null || _a === void 0 ? void 0 : _a.call(animated)) !== null && _b !== void 0 ? _b : 0;
        const LIST_VERTICAL = 24; // padding dưới header
        const raw = headerH + LIST_VERTICAL + contentH;
        const MIN_H = 420;
        const MAX_H = vh - 60;
        return Math.min(Math.max(raw, MIN_H), MAX_H);
    }, [open, headerH, vh, animated]);
    const menuH = useMemo(() => 
    // luôn dùng listMenuH
    listMenuH !== null && listMenuH !== void 0 ? listMenuH : 320, [listMenuH]);
    const shouldScrollList = useMemo(() => {
        if (!open)
            return false;
        return listMenuH !== null && listMenuH >= vh - 60 - 2;
    }, [open, listMenuH, vh]);
    return (React.createElement(Menu, { as: 'div', className: 'relative inline-block' }, ({ close, open: menuOpen }) => (React.createElement(React.Fragment, null,
        React.createElement(NotiBellButton, { onClick: onOpen, unreadCount: unreadCount }),
        React.createElement(Transition, { afterLeave: () => onClose(), as: Fragment, enter: 'transition ease-out duration-150', enterFrom: 'opacity-0 translate-y-1', enterTo: 'opacity-100 translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'opacity-100 translate-y-0', leaveTo: 'opacity-0 translate-y-1', show: menuOpen && open },
            React.createElement(Menu.Items, { className: [
                    'fixed right-12 top-10 z-[9999]',
                    'w-[calc(100vw-60px)] sm:w-[calc(100vw_-_80px)] md:max-w-[calc(90vw_-_260px)] lg:max-w-[calc(70vw_-_260px)] xl:max-w-[calc(60vw_-_280px)]',
                    'max-h-[calc(100vh-60px)]',
                    'flex flex-col overflow-hidden',
                    'rounded-2xl bg-white ',
                    'shadow-[0_4px_16px_0_rgba(0,0,0,0.14),0_4px_38px_0_rgba(0,0,0,0.12),1px_0_0_0_rgba(0,0,0,0.13)_inset,-1px_0_0_0_rgba(0,0,0,0.13)_inset,0_-1px_0_0_rgba(0,0,0,0.17)_inset,0_1px_0_0_rgba(204,204,204,0.5)_inset,0_1px_0_0_rgba(26,26,26,0.07)]',
                    'transition-[height] duration-[480ms] ease-[cubic-bezier(0.16,1,0.3,1)]',
                    'will-change-[height]',
                    'focus:outline-none',
                ].join(' '), static: true, style: { height: menuH ? `${menuH}px` : undefined } },
                React.createElement(NotiHeader, { ref: headerRef, isPreview: isPreview, onBack: () => {
                        setPreviewModalData(null);
                    }, title: previewModalData === null || previewModalData === void 0 ? void 0 : previewModalData.title }),
                React.createElement("div", { className: 'relative min-h-0 flex-1 overflow-hidden' },
                    React.createElement(NotiListPane, { animated: animated, headerH: headerH, iframeClickRef: previewDeps.iframeClickRef, isPreview: isPreview, loadMoreRef: previewDeps.loadMoreRef, menuH: menuH, noti: noti, onBackToList: () => {
                            setPreviewModalData(null);
                        }, onOpenPreview: (data) => setPreviewModalData(data), previewModalData: previewModalData, shouldScrollList: shouldScrollList, tabsH: tabsH, tabsRef: tabsRef })))),
        menuOpen && open && (React.createElement("div", { "aria-hidden": true, className: 'fixed inset-0 z-40', onClick: () => {
                close();
                onClose();
            } }))))));
}
//# sourceMappingURL=NotiDropdown.js.map