import React, { useState, useRef } from "react";
import { Select, StatusTip } from "@tencent/tea-component";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default function SelectDynamicExample() {
  const [status, setStatus] = useState(null);
  const [options, setOptions] = useState([]);

  const timerRef = useRef(null);
  const keywordRef = useRef("");

  const fetch = (inputValue = "") => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
    keywordRef.current = inputValue;

    setStatus("loading");
    setOptions([]);

    const mock = async () => {
      setStatus("loading");
      setOptions([]);
      await sleep(1000);
      // 模拟失败
      if (Math.random() > 0.9) {
        setStatus("error");
        return;
      }
      if (keywordRef.current === inputValue) {
        setStatus(null);
        setOptions([
          { value: `${inputValue}1`, text: `选项一 ${inputValue}` },
          { value: `${inputValue}2`, text: `选项二 ${inputValue}` },
          { value: `${inputValue}3`, text: `选项三 ${inputValue}` },
        ]);
      }
    };

    timerRef.current = setTimeout(mock, 300);
  };

  return (
    <Select
      searchable
      matchButtonWidth
      size="m"
      appearance="button"
      filter={() => true}
      onOpen={fetch}
      onSearch={fetch}
      options={options}
      onChange={value => console.log(value)}
      tips={
        status && (
          <StatusTip
            status={status}
            onRetry={() => fetch(keywordRef.current)}
          />
        )
      }
    />
  );
}