import { Transition } from '@headlessui/react';
import React, { Fragment, useEffect, useState } from 'react';
import { classNames } from '../../types';
import { PHXSpinner } from '../../Loading';
import PHXUseDebounce from '../../Func/useDebounce';
import { applyUrlQuery } from '../utils';
import { PHXUseDirectLink } from '../../../hooks/direct-link';
function Search({ isSearch, paginationChange, search, setCurrentPage, setIsSearch, setOffset, type, tableKey, configUrlApply, }) {
    const directLink = PHXUseDirectLink();
    const [searchValue, setSearchValue] = useState('');
    const debouncedSearch = PHXUseDebounce(searchValue, 300);
    const applyUrl = (search) => {
        var _a, _b;
        if (!configUrlApply)
            return;
        if (!search) {
            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 {
            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' },
            ]);
        }
    };
    useEffect(() => {
        if (configUrlApply) {
            const { searchParams } = configUrlApply;
            const searchQuery = applyUrlQuery.get(searchParams, `search-${tableKey}`) || '';
            if (search.onChange && searchQuery) {
                search.onChange(searchQuery);
                setIsSearch(true);
                setSearchValue(searchQuery);
            }
        }
    }, []);
    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) {
            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.createElement(Transition, { as: 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.createElement("div", { className: 'min-w-full' }, isSearch && (React.createElement("div", { className: 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.createElement("div", { className: 'relative mr-2 w-11/12' },
                React.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.createElement("div", { className: 'flex w-14 justify-center pt-1' }, search.loading ? React.createElement(PHXSpinner, null) : null),
            React.createElement("div", null,
                React.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")))))));
}
export default Search;
//# sourceMappingURL=Search.js.map