import { Helmet } from '@dr.pogodin/react-helmet';
import { Fragment, useCallback } from 'react';
import { Link, useParams } from 'react-router';
import PageNotFound from '../common/lib/PageNotFound';
import type { MultiLang } from '../config';
import Functions from '../functions';
import DatabaseListIndex from './lib/DatabaseListIndex';
import DatabaseListItem from './lib/DatabaseListItem';
import IndexUtil, { INDEX_ID_PUBLIC, type Index } from './lib/IndexUtil';
import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';

export interface Props {
    lang: MultiLang;
}

const DatabaseSearchByIndexId = (props: Props) => {
    const { lang } = props;
    const { id } = useParams<{ id?: string }>();
    const indexId = id ? (id.match(/^\d+$/) !== null ? parseInt(id, 10) : 0) : INDEX_ID_PUBLIC;

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

    const index = IndexUtil.get(indexId);
    if (index === null) {
        return <PageNotFound lang={lang} />;
    }
    const baseUrl = indexId === 0 ? '/' : IndexUtil.getUrl(indexId);
    const pIndexes = IndexUtil.getParents(indexId);
    const parents = pIndexes.map((value: Index) => (
        <Fragment key={value.id}>
            / <Link to={IndexUtil.getUrl(value.id)}>{Functions.mlang(value.title, lang)}</Link>{' '}
        </Fragment>
    ));
    const title = pIndexes.map((value) => `/${Functions.mlang(value.title, lang)}`).join('');
    return (
        <div className="list">
            <Helmet>
                <title>
                    {Functions.mlang(title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} -{' '}
                    {Functions.siteTitle(lang)}
                </title>
            </Helmet>
            <h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
            <div>{parents}</div>
            <DatabaseListIndex lang={lang} index={index} />
            <DatabaseListItem lang={lang} url={baseUrl} search={searchFunc} />
        </div>
    );
};

export default DatabaseSearchByIndexId;