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

const options = Array.from({ length: 10 }).map((_, i) => ({
  value: `${i}`,
  text: `Tea Component | SelectMultiple | Option - ${i}`,
}));

export default function SelectMultipleExample() {
  const [value, setValue] = useState([]);

  return (
    <Form>
      <Form.Item
        label="默认自适应"
        message="默认未开启虚拟滚动，列表自适应宽度"
      >
        <SelectMultiple
          size="m"
          appearance="button"
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
      <Form.Item label="启用虚拟滚动" message="启用虚拟滚动后将固定宽度">
        <SelectMultiple
          virtual
          size="m"
          appearance="button"
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
      <Form.Item label="设置宽度" message="设置可容纳较长内容的固定宽度">
        <SelectMultiple
          virtual
          size="m"
          appearance="button"
          listWidth={360}
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
      <Form.Item label="按钮同宽" message="视情况启用">
        <SelectMultiple
          virtual
          size="m"
          appearance="button"
          matchButtonWidth
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
    </Form>
  );
}