import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/solid';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import { IconV2 } from '../../assets/Icon';
import { flattenMenuTree, normalizeString } from '../../helper';
import BoldIcon from '../bold-icon';
export default function SearchBarMobile({ menu, perCode, unreadCount, }) {
    const [flattenMenu, setFlattenMenu] = useState([]);
    const [searchResult, setSearchResult] = useState([]);
    const [show, setShow] = useState(false);
    const [searchValue, setSearchValue] = useState('');
    const handleSearch = () => {
        try {
            if (!searchValue) {
                setSearchResult([]);
                return;
            }
            const filteredData = flattenMenu.filter((item) => normalizeString(item.name).includes(normalizeString(searchValue)) && perCode.includes(item.pathCode));
            setSearchResult(filteredData);
        }
        catch (e) {
            console.error(e);
        }
    };
    useEffect(() => {
        setFlattenMenu(flattenMenuTree(menu));
    }, [menu.length]);
    useEffect(() => {
        const timerId = setTimeout(() => {
            handleSearch();
        }, 200);
        return () => clearTimeout(timerId);
    }, [searchValue]);
    return (React.createElement("div", { className: 'lg:hidden' },
        !show && (React.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.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4 text-gray-900' }))),
        React.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.createElement("div", { className: 'flex flex-1 items-center overflow-hidden rounded-2xl border-[0.66px] border-gray-900 bg-[#EBEBEB] px-3' },
                React.createElement(Image, { alt: 'icon', height: 20, quality: 100, src: IconV2.SEARCH, width: 20 }),
                React.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.createElement("button", { onClick: () => {
                    setShow(false);
                    setSearchValue('');
                }, type: 'button' },
                React.createElement(XMarkIcon, { className: 'h-6 w-6' }))),
        searchResult.length > 0 && (React.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.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.createElement(BoldIcon, { classname: 'p-px', code: item.code, index: index }),
            React.createElement("p", { className: 'text-xs font-[450] text-gray-900' }, item.name))))))));
}
//# sourceMappingURL=SearchBarMobile.js.map