"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const react_2 = tslib_1.__importStar(require("react"));
const types_1 = require("../../types");
const Loading_1 = require("../../Loading");
const useDebounce_1 = tslib_1.__importDefault(require("../../Func/useDebounce"));
const utils_1 = require("../utils");
const direct_link_1 = require("../../../hooks/direct-link");
function Search({ isSearch, paginationChange, search, setCurrentPage, setIsSearch, setOffset, type, tableKey, configUrlApply, }) {
    const directLink = (0, direct_link_1.PHXUseDirectLink)();
    const [searchValue, setSearchValue] = (0, react_2.useState)('');
    const debouncedSearch = (0, useDebounce_1.default)(searchValue, 300);
    const applyUrl = (search) => {
        var _a, _b;
        if (!configUrlApply)
            return;
        if (!search) {
            utils_1.applyUrlQuery.multipleMethod(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
                { key: `search-${tableKey}`, value: '', method: 'delete' },
                { key: `pagi-${tableKey}`, value: '1', method: 'set' },
            ]);
        }
        else {
            utils_1.applyUrlQuery.set(((_b = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _b === void 0 ? void 0 : _b.push) || directLink, configUrlApply.searchParams, [
                { key: `search-${tableKey}`, value: search },
                { key: `pagi-${tableKey}`, value: '1' },
            ]);
        }
    };
    (0, react_2.useEffect)(() => {
        if (configUrlApply) {
            const { searchParams } = configUrlApply;
            const searchQuery = utils_1.applyUrlQuery.get(searchParams, `search-${tableKey}`) || '';
            if (search.onChange && searchQuery) {
                search.onChange(searchQuery);
                setIsSearch(true);
                setSearchValue(searchQuery);
            }
        }
    }, []);
    (0, react_2.useEffect)(() => {
        if (search.onChange && isSearch) {
            applyUrl(searchValue);
            search.onChange(debouncedSearch);
            setCurrentPage(1);
            setOffset(0);
            if (paginationChange) {
                paginationChange(1);
            }
        }
    }, [debouncedSearch]);
    const handleSearch = (event) => {
        setSearchValue(event.target.value);
    };
    const cancelSearch = () => {
        var _a;
        if (search.onChange && !!searchValue) {
            search.onChange('');
        }
        setIsSearch(false);
        setSearchValue('');
        setCurrentPage(1);
        setOffset(0);
        if (configUrlApply) {
            utils_1.applyUrlQuery.multipleMethod(((_a = configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) === null || _a === void 0 ? void 0 : _a.push) || directLink, configUrlApply.searchParams, [
                { key: `search-${tableKey}`, value: '', method: 'delete' },
                { key: `pagi-${tableKey}`, value: '1', method: 'set' },
            ]);
        }
    };
    return (react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
        react_2.default.createElement("div", { className: 'min-w-full' }, isSearch && (react_2.default.createElement("div", { className: (0, types_1.classNames)('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg ring-opacity-5', type === 'in-card' ? 'bg-gray-50' : 'bg-white') },
            react_2.default.createElement("div", { className: 'relative mr-2 w-11/12' },
                react_2.default.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent bg-white py-1 text-xs text-gray-700 hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onChange: (event) => handleSearch(event), placeholder: 'T\u00ECm ki\u1EBFm', type: 'text', value: searchValue })),
            react_2.default.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? react_2.default.createElement(Loading_1.PHXSpinner, null) : null),
            react_2.default.createElement("div", null,
                react_2.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: () => cancelSearch(), type: 'button' }, "Cancel")))))));
}
exports.default = Search;
//# sourceMappingURL=Search.js.map