"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SearchBarHeader;
const tslib_1 = require("tslib");
const dynamic_1 = tslib_1.__importDefault(require("next/dynamic"));
const react_1 = tslib_1.__importStar(require("react"));
const fixed_action_1 = tslib_1.__importDefault(require("../fixed-action"));
const types_1 = require("../../../types");
const __1 = require("../../../..");
const constant_1 = require("../../constant");
const use_has_scroll_1 = require("../../hooks/use-has-scroll");
const SearchBarHeaderDesktop = (0, dynamic_1.default)(() => Promise.resolve().then(() => tslib_1.__importStar(require('./SearchBarDesktop'))), {
    ssr: false,
});
const SearchBarMobile = (0, dynamic_1.default)(() => Promise.resolve().then(() => tslib_1.__importStar(require('./SearchBarMobile'))), {
    ssr: false,
});
function SearchBarHeader({ menu, perCode, sideBarType, unreadCount, userId, contentRef, }) {
    const [isDesktop, setIsDesktop] = (0, react_1.useState)(false);
    const [isShowFixedAction, setIsShowFixAction] = (0, react_1.useState)(false);
    const { hasVerticalScroll } = (0, use_has_scroll_1.useHasScroll)(contentRef, [perCode.length]);
    (0, react_1.useEffect)(() => {
        const mq = window.matchMedia('(min-width: 1024px)');
        const handler = (e) => {
            setIsDesktop(e.matches);
        };
        handler(mq); // initial run
        mq.addEventListener('change', handler);
        return () => mq.removeEventListener('change', handler);
    }, []);
    (0, __1.useMainwrapV4EventBus)(constant_1.FIXED_ACTION_EVENT, (payload) => {
        if (isShowFixedAction !== payload.show) {
            setIsShowFixAction(payload.show || false);
        }
    });
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(fixed_action_1.default, { className: (0, types_1.classNames)(!hasVerticalScroll && 'lg:!hidden', isDesktop
                ? 'left-1/2 z-50 h-9 -translate-x-1/4 lg:w-[25rem] xl:w-[35.625rem]'
                : 'left-4 right-4 top-[3.5rem] h-9', 'transition-transform duration-200 ease-in-out', isShowFixedAction ? '' : isDesktop ? 'pointer-events-none -translate-y-14' : 'hidden') }),
        userId && menu.length > 0 && perCode.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null, isDesktop ? (react_1.default.createElement(SearchBarHeaderDesktop, { hasVerticalScroll: hasVerticalScroll, menu: menu, perCode: perCode, sideBarType: sideBarType, userId: userId })) : (react_1.default.createElement(SearchBarMobile, { menu: menu, perCode: perCode, unreadCount: unreadCount }))))));
}
//# sourceMappingURL=index.js.map