"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SearchBarMobile;
const tslib_1 = require("tslib");
const solid_1 = require("@heroicons/react/24/solid");
const image_1 = tslib_1.__importDefault(require("next/image"));
const react_1 = tslib_1.__importStar(require("react"));
const Icon_1 = require("../../assets/Icon");
const helper_1 = require("../../helper");
const bold_icon_1 = tslib_1.__importDefault(require("../bold-icon"));
function SearchBarMobile({ menu, perCode, unreadCount, }) {
    const [flattenMenu, setFlattenMenu] = (0, react_1.useState)([]);
    const [searchResult, setSearchResult] = (0, react_1.useState)([]);
    const [show, setShow] = (0, react_1.useState)(false);
    const [searchValue, setSearchValue] = (0, react_1.useState)('');
    const handleSearch = () => {
        try {
            if (!searchValue) {
                setSearchResult([]);
                return;
            }
            const filteredData = flattenMenu.filter((item) => (0, helper_1.normalizeString)(item.name).includes((0, helper_1.normalizeString)(searchValue)) && perCode.includes(item.pathCode));
            setSearchResult(filteredData);
        }
        catch (e) {
            console.error(e);
        }
    };
    (0, react_1.useEffect)(() => {
        setFlattenMenu((0, helper_1.flattenMenuTree)(menu));
    }, [menu.length]);
    (0, react_1.useEffect)(() => {
        const timerId = setTimeout(() => {
            handleSearch();
        }, 200);
        return () => clearTimeout(timerId);
    }, [searchValue]);
    return (react_1.default.createElement("div", { className: 'lg:hidden' },
        !show && (react_1.default.createElement("button", { className: `absolute ${unreadCount > 0 ? 'right-24' : 'right-20'} z-50 -mr-1.5 -mt-3 p-1`, onClick: () => setShow(true), type: 'button' },
            react_1.default.createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4 text-gray-900' }))),
        react_1.default.createElement("div", { className: `absolute left-2 right-2 top-1.5 flex items-center gap-x-2 bg-[#dedede] transition-all ${show ? 'z-50 opacity-100' : '-z-10 opacity-0'}` },
            react_1.default.createElement("div", { className: 'flex flex-1 items-center overflow-hidden rounded-2xl border-[0.66px] border-gray-900 bg-[#EBEBEB] px-3' },
                react_1.default.createElement(image_1.default, { alt: 'icon', height: 20, quality: 100, src: Icon_1.IconV2.SEARCH, width: 20 }),
                react_1.default.createElement("input", { className: '-ml-1.5 flex-1 border-none bg-transparent text-xs focus:ring-0', onChange: (e) => setSearchValue(e.target.value), placeholder: 'T\u00ECm ki\u1EBFm ph\u00E2n h\u1EC7', type: 'text', value: searchValue })),
            react_1.default.createElement("button", { onClick: () => {
                    setShow(false);
                    setSearchValue('');
                }, type: 'button' },
                react_1.default.createElement(solid_1.XMarkIcon, { className: 'h-6 w-6' }))),
        searchResult.length > 0 && (react_1.default.createElement("div", { className: 'absolute left-0 right-0 top-12 h-[calc(100vh-3rem)] overflow-y-auto bg-[#EBEBEB] px-4 pb-3 pt-3' }, searchResult.map((item, index) => (react_1.default.createElement("a", { key: item.id, className: '-ml-2 flex items-center gap-x-2 p-2 hover:rounded-lg hover:bg-gray-100', href: item.path },
            react_1.default.createElement(bold_icon_1.default, { classname: 'p-px', code: item.code, index: index }),
            react_1.default.createElement("p", { className: 'text-xs font-[450] text-gray-900' }, item.name))))))));
}
//# sourceMappingURL=SearchBarMobile.js.map