import React from "react";
import { BrainAtlasType, MultiLang } from "../config";
import Functions from "../functions";
import DatabaseListItem from "./lib/DatabaseListItem";
import ItemUtil, { SearchCallbackFunc, SortCondition } from "./lib/ItemUtil";

interface Props {
  lang: MultiLang;
  itemType: string;
  subItemType: string;
  type: BrainAtlasType;
}

class DatabaseSearchByItemType extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.searchFunc = this.searchFunc.bind(this);
  }

  searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
    const { itemType, subItemType, type } = this.props;
    if (itemType === "") {
      const res = { total: 0, data: [] };
      func(res);
    } else {
      ItemUtil.getListByItemType(type, itemType, subItemType, condition, func);
    }
  }

  getUrl() {
    const { itemType, subItemType, type } = this.props;
    let url = ItemUtil.getItemTypeSearchUrl(type, itemType, subItemType);
    return url;
  }

  render() {
    const { lang, type } = this.props;
    const baseUrl = this.getUrl();
    return (
      <div className="list">
        <h3>{Functions.mlang("[en]Listing item[/en][ja]アイテム一覧[/ja]", lang)}</h3>
        <DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} type={type} />
      </div>
    );
  }
}

export default DatabaseSearchByItemType;