import { useCallback, useMemo } from 'react';
import { useLocation } from 'react-router';
import type { MultiLang } from '../config';
import DatabaseListItem from './lib/DatabaseListItem';
import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';

interface Props {
    lang: MultiLang;
}

const DatabaseSearchByAdvancedKeyword = (props: Props) => {
    const { lang } = props;
    const location = useLocation();
    const query = useMemo(() => ItemUtil.getAdvancedSearchQueryByQuery(location.search), [location.search]);

    const searchFunc = useCallback(
        (condition: SortCondition, func: SearchCallbackFunc) => {
            ItemUtil.getListByAdvancedSearchQuery(query, condition, func);
        },
        [query]
    );

    return (
        <div className="list">
            <h3>Listing item</h3>
            <DatabaseListItem lang={lang} url={ItemUtil.getSearchByAdvancedKeywordsUrl(query)} search={searchFunc} />
        </div>
    );
};

export default DatabaseSearchByAdvancedKeyword;