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

import './index.css';

const sizes = ['small', 'medium', 'large'];

const minMapBySize = {
  small: 0,
  medium: -10,
  large: 10,
};

const NumberPickerDemo = () => {
  const [value, setValue] = useState(50);

  return (
    <View className="app">
      <View>
        {sizes.map((size) => {
          return (
            <View key={size} className="line">
              <Text className="label">{size}</Text>
              <NumberPicker min={minMapBySize[size]} max={100} size={size} />
            </View>
          );
        })}
      </View>
      <View className="line">
        <Text className="label">diabled</Text>
        <NumberPicker min={0} max={100} disabled={true} />
      </View>
      <View className="line">
        <Text className="label">readOnly</Text>
        <NumberPicker min={0} max={100} readOnly={true} />
      </View>
      <View className="line">
        <Text className="label">受控</Text>
        <NumberPicker min={10} max={100} value={value} onChange={(value) => setValue(value)} />
      </View>
      <Button
        type="primary"
        onClick={() => {
          setValue(undefined);
        }}
      >
        reset
      </Button>
    </View>
  );
};

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