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

import './index.css';

const data = [];
for (let i = 0; i < 20; i++) {
  data.push({
    label: `Option ${i}`,
    value: i,
  });
}
const sizes = ['small', 'medium', 'large'];

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

  return (
    <View>
      <Text className="demo-title">Sizes</Text>
      <View>
        {sizes.map((size) => (
          <Select
            key={size}
            placeholder={size}
            size={size}
            onChange={(v) => {
              console.log({ size, v });
            }}
          >
            <Select.Option value={1}>option 1</Select.Option>
            <Select.Option value={2}>option 2</Select.Option>
            <Select.Option value={3}>option 3</Select.Option>
          </Select>
        ))}
      </View>

      <Text className="demo-title">No Arrow</Text>
      <View>
        <Select placeholder="no arrow" showIcon={false}>
          <Select.Option value={1}>option 1</Select.Option>
          <Select.Option value={2}>option 2</Select.Option>
          <Select.Option value={3}>option 3</Select.Option>
        </Select>
      </View>

      <Text className="demo-title">Align</Text>
      <View>
        <Select placeholder="align right" align="right">
          <Select.Option value={1}>option 1</Select.Option>
          <Select.Option value={2}>option 2</Select.Option>
          <Select.Option value={3}>option 3</Select.Option>
        </Select>
      </View>

      <Text className="demo-title">DataSource</Text>
      <View>
        <Select placeholder="Please Select..." mode="multiple" dataSource={data}></Select>
        <Select
          placeholder="Please Select..."
          defaultValue={false}
          dataSource={[
            {
              label: 'True',
              value: true,
            },
            {
              label: 'False',
              value: false,
            },
          ]}
        ></Select>
      </View>

      <Text className="demo-title">Multiple</Text>
      <View>
        <Select placeholder="Please Select..." mode="multiple" value={val} onChange={handleChange}>
          {data.map((item) => (
            <Select.Option key={item.value} value={item.value} disabled={item.disabled}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
        <Button
          type="primary"
          model="outline"
          onClick={() => {
            setVal(undefined);
          }}
        >
          clear selection
        </Button>
      </View>

      <Text className="demo-title">Disabled & ReadOnly</Text>
      <View>
        <Select placeholder="disabled with value" value={2} disabled>
          <Select.Option value={1}>option 1</Select.Option>
          <Select.Option value={2}>option 2</Select.Option>
          <Select.Option value={3}>option 3</Select.Option>
        </Select>
        <Select placeholder="disabled" disabled>
          <Select.Option value={1}>option 1</Select.Option>
          <Select.Option value={2}>option 2</Select.Option>
          <Select.Option value={3}>option 3</Select.Option>
        </Select>
        <Select placeholder="readOnly" readOnly>
          <Select.Option value={1}>option 1</Select.Option>
          <Select.Option value={2}>option 2</Select.Option>
          <Select.Option value={3}>option 3</Select.Option>
        </Select>
      </View>
    </View>
  );
};

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