import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { Radio } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import '../../components/index.css';

const Demo = () => {
  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Radio size="small">basic radio</Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Radio size="medium">basic radio</Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Radio size="large">basic radio</Radio>
          </View>
        </View>
      </View>
      <Text className="demo-title">checked</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Radio size="small" checked>
              basic radio
            </Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Radio size="medium" checked>
              basic radio
            </Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Radio size="large" checked>
              basic radio
            </Radio>
          </View>
        </View>
      </View>
      <Text className="demo-title">disabled</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Radio size="small" disabled>
              basic radio
            </Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Radio size="medium" disabled>
              basic radio
            </Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Radio size="large" disabled>
              basic radio
            </Radio>
          </View>
        </View>
      </View>
      <Text className="demo-title">checked disabled</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Radio size="small" checked disabled>
              basic radio
            </Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Radio size="medium" checked disabled>
              basic radio
            </Radio>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Radio size="large" checked disabled>
              basic radio
            </Radio>
          </View>
        </View>
      </View>

      <Text className="demo-title">Fuction</Text>
      <View className="demo-content">
        <View className="demo-item">
          <Radio
            onChange={(value) => {
              alert(`select value:${value}`);
            }}
          >
            Normal
          </Radio>
        </View>
      </View>
    </View>
  );
};

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