import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { Select, Badge } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    label: `Option ${i}`,
    value: i,
  });
}

const SelectDemo = () => {
  const [val, setVal] = useState([]);
  const handleChange = (v) => {
    setVal(v);
  };

  return (
    <View>
      <Text className="demo-title">Custom Select Content</Text>
      <Select
        placeholder="Please Select..."
        mode="multiple"
        value={val}
        onChange={handleChange}
        renderSelection={(options = [], val) => {
          if (!val || options.length === 0) {
            return null;
          }

          return (
            <View className="custom-content">
              <Text className="content-text">{options.map((option) => option.children).join(',')}</Text>
              <Badge count={options.length} />
            </View>
          );
        }}
      >
        {data.map((item) => (
          <Select.Option key={item.value} value={item.value} disabled={item.disabled}>
            {item.label}
          </Select.Option>
        ))}
      </Select>
    </View>
  );
};

// render(<SelectDemo />, null, { driver: DriverUniversal });
 export default SelectDemo