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

const Demo = () => {
  const [groupValue, setGroupValue] = useState(2);
  const [isDisabled, setDisabled] = useState(true);

  return (
    <View>
      <Text className="demo-title">Group Usage</Text>
      <View className="demo-content">
        <View className="demo-item">
          <Radio.Group
            defaultValue={2}
            dataSource={[
              {
                label: 'Radio 1',
                value: 1,
              },
              {
                label: 'Radio 2',
                value: 2,
              },
              {
                label: 'Radio 3',
                value: 3,
              },
            ]}
          />
        </View>
      </View>
      <Text className="demo-title">Controlled</Text>
      <View className="demo-content">
        <View style={{ display: 'flex', flexDirection: 'row', marginBottom: 20 }}>
          <Button
            style={{
              width: 250,
              height: 60,
              marginRight: 20,
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
            }}
            type="primary"
            size="small"
            onClick={() => {
              setGroupValue(1);
            }}
          >
            change value
          </Button>
          <Button
            type="primary"
            size="small"
            style={{
              width: 250,
              height: 60,
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
            }}
            onClick={() => {
              setDisabled(!isDisabled);
            }}
          >
            toggleDisable
          </Button>
        </View>

        <View className="demo-item">
          <Radio.Group
            value={groupValue}
            direction="horizontal"
            onChange={(value) => {
              console.log('selected radio is:', value);
            }}
            disabled={isDisabled}
            dataSource={[
              {
                label: 'Radio 1',
                value: 1,
              },
              {
                label: 'Radio 2',
                value: 2,
              },
              {
                label: 'Radio 3',
                value: 3,
              },
            ]}
          />
        </View>
      </View>
    </View>
  );
};

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