"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotiListPane;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const helper_1 = require("../../../helper");
const NotiPreviewPane_1 = tslib_1.__importDefault(require("./NotiPreviewPane"));
const ReadStatusRight_1 = require("./ReadStatusRight");
const ReportButtonV2_1 = require("../../../../ReportButtonV2");
const Loading_1 = require("../../../../Loading");
const EmptyRecord_1 = require("../../../../EmptyRecord");
function NotiListPane({ animated, headerH, iframeClickRef, isPreview, loadMoreRef, menuH, noti, onBackToList, onOpenPreview, previewModalData, shouldScrollList, tabsH, tabsRef, }) {
    const [renderSkeleton, setRenderSkeleton] = (0, react_1.useState)(false);
    const shimmerCss = `
  @keyframes skeleton-fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes skeleton-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  `;
    const renderSkeletons = () => (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("style", null, shimmerCss),
        react_1.default.createElement("div", { className: 'flex flex-col gap-4 pt-2' }, Array.from({ length: 15 }).map((_, i) => (react_1.default.createElement("div", { key: i, className: 'p-2' },
            react_1.default.createElement("div", { className: `${i > 0 && 'pt-[1px]'} flex justify-between gap-3 sm:gap-4 md:gap-8 lg:gap-16 xl:gap-40` },
                react_1.default.createElement("div", { className: 'min-w-0 flex-1 space-y-3' },
                    react_1.default.createElement("div", { className: [
                            'h-2 animate-pulse rounded-full bg-gray-200',
                            i % 3 === 0 ? 'w-1/2' : i % 3 === 1 ? 'w-2/3' : 'w-3/5',
                        ].join(' ') }),
                    react_1.default.createElement("div", { className: 'h-2 w-1/6 animate-pulse rounded-full bg-gray-200' }),
                    react_1.default.createElement("div", { className: 'h-2 w-full animate-pulse rounded-full bg-gray-200' })),
                react_1.default.createElement("div", { className: 'shrink-0' },
                    react_1.default.createElement("div", { className: 'flex flex-col items-end gap-6' },
                        react_1.default.createElement("div", { className: 'h-4 w-4 animate-pulse rounded bg-gray-200' }),
                        react_1.default.createElement("div", { className: '-mt-1 flex items-center gap-1' },
                            react_1.default.createElement("div", { className: 'h-[14px] w-[14px] animate-pulse rounded bg-gray-200' }),
                            react_1.default.createElement("div", { className: 'h-2 w-12 animate-pulse rounded-full bg-gray-200' })))))))))));
    (0, react_1.useEffect)(() => {
        if (animated.showSkeleton) {
            setRenderSkeleton(true);
        }
        else {
            setRenderSkeleton(false);
        }
    }, [animated.showSkeleton]);
    return (react_1.default.createElement("div", { className: 'flex h-full min-h-0 w-full flex-col' },
        react_1.default.createElement("div", { ref: tabsRef, className: 'px-3 pt-0.5' },
            react_1.default.createElement(ReportButtonV2_1.PHXReportButtonTabV2, { activeTab: noti.activeTab, minWidth: 120, onChange: (t) => {
                    if (noti.loadingMore || noti.loadingInit)
                        return;
                    if (isPreview)
                        onBackToList();
                    noti.setActiveTab(t);
                }, 
                // @ts-ignore
                tabs: noti.tabs })),
        react_1.default.createElement("div", { className: 'relative min-h-0 flex-1 overflow-hidden', style: { height: `calc(100% - ${tabsH}px)` } },
            react_1.default.createElement("div", { className: [
                    'absolute inset-0',
                    'transition-[opacity,transform] duration-[360ms] ease-out',
                    'will-change-[opacity,transform]',
                    isPreview ? 'pointer-events-none scale-[0.998] opacity-0' : 'scale-100 opacity-100',
                ].join(' ') },
                react_1.default.createElement("div", { className: [
                        'noti-scroll-root h-full min-h-0 px-3 pb-6',
                        shouldScrollList ? 'overflow-auto' : 'overflow-hidden',
                    ].join(' ') },
                    react_1.default.createElement("div", { className: 'min-h-52 relative' },
                        react_1.default.createElement("div", { className: [
                                animated.relaxMaxH ? 'overflow-visible' : 'overflow-hidden',
                                'transition-[max-height] duration-500 ease-out',
                            ].join(' '), style: { maxHeight: animated.getMaxHeight() } },
                            react_1.default.createElement("div", { ref: animated.contentRef }, noti.listData.length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
                                react_1.default.createElement("ul", null, noti.listData.map((item, idx) => {
                                    var _a, _b, _c, _d, _e;
                                    const preview = !item.unlinked
                                        ? ((_a = item === null || item === void 0 ? void 0 : item.preview_text) === null || _a === void 0 ? void 0 : _a.trim()) ||
                                            ((_b = item === null || item === void 0 ? void 0 : item.title) === null || _b === void 0 ? void 0 : _b.trim()) ||
                                            ((_d = (_c = item === null || item === void 0 ? void 0 : item.payload) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.trim()) ||
                                            'Thông báo'
                                        : item.content;
                                    const previewText = item.unlinked ? (0, helper_1.htmlToText)(preview) : preview;
                                    const handleClick = () => {
                                        var _a;
                                        if ((item === null || item === void 0 ? void 0 : item.id) && iframeClickRef.current[item.id]) {
                                            return;
                                        }
                                        if (item === null || item === void 0 ? void 0 : item.fallback_url) {
                                            window.location.href = `${item.fallback_url}?ref=notification`;
                                            return;
                                        }
                                        onOpenPreview({
                                            id: item.id,
                                            title: (_a = item === null || item === void 0 ? void 0 : item.title) !== null && _a !== void 0 ? _a : 'Thông báo',
                                            html: (item === null || item === void 0 ? void 0 : item.content) || preview || previewText || '',
                                        });
                                    };
                                    return (react_1.default.createElement("li", { key: item.id, className: `group ${idx === 0 ? 'pt-1' : ' pt-1.5'}` },
                                        react_1.default.createElement("button", { className: 'w-full p-2 text-left hover:rounded-lg hover:bg-gray-50', onClick: handleClick, type: 'button' },
                                            react_1.default.createElement("div", { className: 'flex justify-between gap-3 sm:gap-4 md:gap-8 lg:gap-16 xl:gap-40' },
                                                react_1.default.createElement("div", { className: 'min-w-0' },
                                                    react_1.default.createElement("div", { className: 'truncate text-xs font-semibold text-gray-800' }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Thông báo'),
                                                    react_1.default.createElement("div", { className: 'mt-1 text-[11px] text-gray-500' }, item === null || item === void 0 ? void 0 : item.sent_at),
                                                    react_1.default.createElement("div", { className: 'mt-1 truncate text-xs text-gray-500' }, previewText)),
                                                react_1.default.createElement("div", { className: 'flex items-center' },
                                                    react_1.default.createElement(ReadStatusRight_1.ReadStatusRight, { isExpanded: !item.unlinked, isRead: !!(item === null || item === void 0 ? void 0 : item.read_at) }))))));
                                })),
                                noti.loadingMore && (react_1.default.createElement("div", { className: 'animate-fadeIn flex items-center justify-center py-4' },
                                    react_1.default.createElement(Loading_1.PHXSpinner, null))),
                                react_1.default.createElement("div", { ref: loadMoreRef, className: 'h-14' }))) : noti.loadingInit ? null : (react_1.default.createElement(EmptyRecord_1.PHXEmptyRecord, { description: 'D\u1EEF li\u1EC7u \u0111ang tr\u1ED1ng.', title: 'Tr\u1ED1ng' })))),
                        renderSkeleton && (react_1.default.createElement("div", { className: 'absolute inset-0', style: {
                                animation: `skeleton-fade-in 80ms ease forwards`,
                            } }, renderSkeletons()))))),
            react_1.default.createElement("div", { className: [
                    'absolute inset-0',
                    'transition-[opacity,transform] duration-[260ms] ease-out',
                    'will-change-[opacity,transform]',
                    isPreview ? 'scale-100 opacity-100' : 'pointer-events-none scale-[0.998] opacity-0',
                ].join(' ') },
                react_1.default.createElement(NotiPreviewPane_1.default, { data: previewModalData, headerH: headerH, maxMenuH: menuH, tabsH: tabsH })))));
}
//# sourceMappingURL=NotiListPane.js.map