import React from "react";
import { SelectMultiple, Form, Tag, Tooltip } from "@tencent/tea-component";

const options = [
  { value: "gz", text: "瓜子", tooltip: "百煮入味香" },
  {
    value: "hs",
    text: "花生",
    tooltip: "花生已售罄",
    disabled: true,
  },
  { value: "bmf", text: "爆米花", tooltip: "焦糖味" },
  { value: "kl", text: "可乐", tooltip: "肥宅快乐水" },
  { value: "pj", text: "啤酒" },
  { value: "kqs", text: "矿泉水" },
  { value: "bbz", text: "八宝粥" },
];

export default function MultiSelectExample() {
  return (
    <Form>
      <Form.Item label="多选">
        <SelectMultiple options={options} />
      </Form.Item>
      <Form.Item label="包含全选">
        <SelectMultiple
          options={options}
          appearance="button"
          size="s"
          allOption={{
            value: "all",
            text: "全选",
            tooltip: "我都要",
          }}
        />
      </Form.Item>
      <Form.Item label="直接触发改变">
        <SelectMultiple
          options={options}
          staging={false}
          appearance="button"
          allOption={{
            value: "all",
            text: "全选",
            tooltip: "我都要",
          }}
        />
      </Form.Item>
      <Form.Item label="自定义按钮内容">
        <SelectMultiple
          appearance="button"
          defaultValue={["gz"]}
          options={options}
          button={options =>
            options.length ? (
              <Tooltip title={options.map(o => o.text).join(", ")}>
                <div>
                  <Tag.Group>
                    {options.map(o => (
                      <Tag key={o.value}>{o.text}</Tag>
                    ))}
                  </Tag.Group>
                </div>
              </Tooltip>
            ) : (
              "请选择"
            )
          }
        />
      </Form.Item>
    </Form>
  );
}