import React, { useState } from "react";
import { AutoComplete, Input, Form } from "@tencent/tea-component";

const { TextArea } = Input;

const options = [
  { groupKey: "fruit", value: "strawberry", text: "草莓", tooltip: "甜甜甜" },
  { groupKey: "fruit", value: "cranberry", text: "红莓", disabled: true },
  { groupKey: "fruit", value: "raspberry", text: "树莓" },
  { groupKey: "drink", value: "coca-cola", text: "可口可乐" },
  {
    groupKey: "drink",
    value: "pepsi-cola",
    text: "百事可乐",
    tooltip: "百事可乐为什么比可口可乐好喝？",
  },
];

const groups = {
  fruit: "水果",
  drink: "饮料",
};

const INPUT_VALUE = "__user_input__";
const withInputOption = (options, text) => {
  const filteredOptions = options.filter(opt => opt.text.includes(text));
  if (!filteredOptions.length) {
    filteredOptions.push({ value: INPUT_VALUE, text });
  }
  return filteredOptions;
};

export default function AutoCompleteExample() {
  const [inputValue1, setInputValue1] = useState("");
  const [inputValue2, setInputValue2] = useState("");
  const [inputValue3, setInputValue3] = useState("");

  return (
    <Form>
      <Form.Item label="输入筛选">
        <AutoComplete
          options={options.filter(({ text }) => text.includes(inputValue1))}
          groups={groups}
          keyword={inputValue1}
          tips="没有匹配的标签"
          onChange={value => {
            const option = options.find(opt => opt.value === value);
            setInputValue1(option.text);
            console.log(value);
          }}
          onScrollBottom={event => console.log(event)}
        >
          {ref => (
            <Input
              ref={ref}
              value={inputValue1}
              onChange={value => setInputValue1(value)}
            />
          )}
        </AutoComplete>
      </Form.Item>

      <Form.Item label="支持 options 外输入">
        <AutoComplete
          options={withInputOption(options, inputValue2)}
          groups={groups}
          keyword={inputValue2}
          onChange={value => {
            const option = withInputOption(options, inputValue2).find(
              opt => opt.value === value
            );
            setInputValue2(option.text);
            console.log(value);
          }}
        >
          {ref => (
            <Input
              ref={ref}
              value={inputValue2}
              onChange={value => setInputValue2(value)}
            />
          )}
        </AutoComplete>
      </Form.Item>

      <Form.Item label="多行输入">
        <AutoComplete
          options={withInputOption(options, inputValue3)}
          groups={groups}
          keyword={inputValue3}
          onChange={value => {
            const option = withInputOption(options, inputValue3).find(
              opt => opt.value === value
            );
            setInputValue3(option.text);
            console.log(value);
          }}
        >
          {ref => (
            <TextArea
              ref={ref}
              value={inputValue3}
              onChange={value => setInputValue3(value)}
            />
          )}
        </AutoComplete>
      </Form.Item>
    </Form>
  );
}