import { useState } from "react";
import DebounceSelect from "./featch_select";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
interface UserValue {
  label: string;
  value: string;
}
const Dumbselect = (props: Store) => {
  const { usrStore } = props;
  const [value, setValue] = useState<UserValue[]>([]);

  async function fetchUserList(username: string): Promise<UserValue[]> {
    return usrStore.serchUser(username).then((res) => {
      return res.data.record.map((item) => ({
        label: item.user_name,
        value: item.identity,
      }));
    });
  }
  return (
    <DebounceSelect
      mode="multiple"
      value={value}
      placeholder="Select users"
      fetchOptions={fetchUserList}
      onChange={(newValue) => {
        setValue(newValue as UserValue[]);
      }}
      style={{ width: "100%" }}
    />
  );
};

export default inject("usrStore")(observer(Dumbselect));
