import React from 'react';

import { useLocation } from 'react-router-dom';
import { BrainAtlasType, MultiLang } from '../config';
import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
import XoonipsListItem from './lib/XoonipsListItem';

interface Props {
  lang: MultiLang;
  type: BrainAtlasType;
}

const XoonipsSearchByAdvancedKeyword: React.FC<Props> = (props) => {
  const { lang, type } = props;
  const location = useLocation();
  const query = ItemUtil.getAdvancedSearchQueryByQuery(location.search);

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

  const baseUrl = ItemUtil.getSearchByAdvancedKeywordsUrl(type, query);

  return (
    <div className="list">
      <h3>Listing item</h3>
      <XoonipsListItem lang={lang} url={baseUrl} search={searchFunc} type={type} />
    </div>
  );
};

export default XoonipsSearchByAdvancedKeyword;