import React, { useState, useEffect } from 'react';
// import { queryAuthorList } from '@/services/author';
import { Select } from 'antd';
import _debounce from 'lodash/debounce';

export interface Options {
  label: string;
  value: string;
}
interface AuthorSelectPropsType {
  params?: any;
  value?: string | number;
  defaultOptions: Options[];
}
const AuthorSelect: React.FC<AuthorSelectPropsType> = ({
  params = {},
  value,
  defaultOptions,
  ...rest
}) => {
  const [options, setOptions] = useState<Options[]>([]);
  const [isFirst, setIsFirst] = useState(true);
  useEffect(() => {
    if (isFirst) {
      if (defaultOptions.length > 0 && defaultOptions.findIndex((item) => !item.label) === -1) {
        setOptions(defaultOptions);
        setIsFirst(false);
      }
    }
  }, [defaultOptions, isFirst]);
  const handleSearch = async (name: string) => {
    // const { data } = await queryAuthorList({
    //   page: 1,
    //   num: 10,
    //   name,
    // });
    // const optionsList = data?.map((item) => ({
    //   label: `${item.first_name} ${item.last_name}`,
    //   value: item.id,
    // }));
    // setOptions(optionsList);
  };
  const handleFocus = () => {
    handleSearch('');
  };
  return (
    <Select
      {...rest}
      options={options}
      value={value}
      allowClear
      showSearch
      onFocus={handleFocus}
      optionFilterProp="label"
      onSearch={_debounce(handleSearch, 500)}
    />
  );
};

export default AuthorSelect;
