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

interface Props {
    lang: MultiLang;
}

const DatabaseSearchByKeyword = (props: Props) => {
    const { lang } = props;
    const location = useLocation();
    const { type, keyword } = ItemUtil.getSearchKeywordByQuery(location.search);

    const searchFunc = useCallback(
        (condition: SortCondition, func: SearchCallbackFunc) => {
            if (keyword === '') {
                func({ total: 0, data: [] });
            } else {
                ItemUtil.getListByKeyword(type, keyword, condition, func);
            }
        },
        [type, keyword]
    );

    return (
        <div className="list">
            <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
            <p>
                {Functions.mlang('[en]Search Keyword[/en][ja]検索キーワード[/ja]', lang)} : {keyword}
            </p>
            <DatabaseListItem lang={lang} url={ItemUtil.getSearchByKeywordUrl(type, keyword)} search={searchFunc} />
        </div>
    );
};

export default DatabaseSearchByKeyword;