"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_2 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/24/solid");
const types_1 = require("../types");
const Loading_1 = require("../Loading");
function Search({ isSearch, handleSearch, searchValue, setSearchValue, setIsSearch, search, isHideSearch, setIsHideSearch, type, }) {
    (0, react_1.useEffect)(() => {
        if ((search === null || search === void 0 ? void 0 : search.enable) && isHideSearch && !search.loading) {
            setIsSearch(false);
            setIsHideSearch(false);
        }
    }, [isHideSearch, search === null || search === void 0 ? void 0 : search.loading]);
    return (react_1.default.createElement("div", { className: 'border-b' },
        react_1.default.createElement("div", { className: (0, types_1.classNames)('relative flex h-9 w-full items-center px-4', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
            react_1.default.createElement("div", { className: (0, types_1.classNames)('flex w-full items-center justify-end transition-opacity duration-300', isSearch ? 'pointer-events-none opacity-0' : 'opacity-100') },
                react_1.default.createElement("button", { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200', onClick: () => setIsSearch(true), type: 'button' },
                    react_1.default.createElement(solid_1.MagnifyingGlassIcon, { className: 'h-4 w-4' }))),
            react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition-all duration-500 overflow-hidden', enterFrom: 'transform scale-95 opacity-0 h-0', enterTo: 'transform scale-100 opacity-100 h-full', leaveFrom: 'transform scale-100 opacity-100 h-full', leaveTo: 'transform scale-95 opacity-0 h-0', show: isSearch },
                react_1.default.createElement("div", { className: 'absolute inset-0 z-10 flex items-center bg-inherit px-5' },
                    react_1.default.createElement("div", { className: 'flex w-full items-center gap-2' },
                        react_1.default.createElement("div", { className: 'relative flex-1' },
                            react_1.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onChange: handleSearch, placeholder: 'T\u00ECm ki\u1EBFm', type: 'text', value: searchValue })),
                        react_1.default.createElement("div", { className: 'flex w-8 justify-center' }, (search === null || search === void 0 ? void 0 : search.loading) && react_1.default.createElement(Loading_1.PHXSpinner, null)),
                        react_1.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: () => {
                                if (searchValue) {
                                    setIsHideSearch(true);
                                    search === null || search === void 0 ? void 0 : search.setLoading(true);
                                    setSearchValue('');
                                }
                                else {
                                    setIsSearch(false);
                                }
                            }, type: 'button' }, "Cancel")))))));
}
exports.default = Search;
//# sourceMappingURL=Search.js.map