import dynamic from 'next/dynamic';
import React, { useEffect, useState } from 'react';
import FixedAction from '../fixed-action';
import { classNames } from '../../../types';
import { useMainwrapV4EventBus } from '../../../..';
import { FIXED_ACTION_EVENT } from '../../constant';
import { useHasScroll } from '../../hooks/use-has-scroll';
const SearchBarHeaderDesktop = dynamic(() => import('./SearchBarDesktop'), {
    ssr: false,
});
const SearchBarMobile = dynamic(() => import('./SearchBarMobile'), {
    ssr: false,
});
export default function SearchBarHeader({ menu, perCode, sideBarType, unreadCount, userId, contentRef, }) {
    const [isDesktop, setIsDesktop] = useState(false);
    const [isShowFixedAction, setIsShowFixAction] = useState(false);
    const { hasVerticalScroll } = useHasScroll(contentRef, [perCode.length]);
    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);
    }, []);
    useMainwrapV4EventBus(FIXED_ACTION_EVENT, (payload) => {
        if (isShowFixedAction !== payload.show) {
            setIsShowFixAction(payload.show || false);
        }
    });
    return (React.createElement(React.Fragment, null,
        React.createElement(FixedAction, { className: 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.createElement(React.Fragment, null, isDesktop ? (React.createElement(SearchBarHeaderDesktop, { hasVerticalScroll: hasVerticalScroll, menu: menu, perCode: perCode, sideBarType: sideBarType, userId: userId })) : (React.createElement(SearchBarMobile, { menu: menu, perCode: perCode, unreadCount: unreadCount }))))));
}
//# sourceMappingURL=index.js.map