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

const CheckboxDemo = () => {
  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">
            <Checkbox size="small">Checkbox</Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Checkbox size="medium">Checkbox</Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Checkbox size="large">Checkbox</Checkbox>
          </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">
            <Checkbox size="small" checked>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Checkbox size="medium" checked>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Checkbox size="large" checked>
              Checkbox
            </Checkbox>
          </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">
            <Checkbox size="small" disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Checkbox size="medium" disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Checkbox size="large" disabled>
              Checkbox
            </Checkbox>
          </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">
            <Checkbox size="small" checked disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Checkbox size="medium" checked disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Checkbox size="large" checked disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
      </View>
      <Text className="demo-title">indeterminate</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Checkbox size="small" indeterminate>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Checkbox size="medium" indeterminate>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Checkbox size="large" indeterminate>
              Checkbox
            </Checkbox>
          </View>
        </View>
      </View>
      <Text className="demo-title">indeterminate disabled</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content">
            <Checkbox size="small" indeterminate>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content">
            <Checkbox size="medium" indeterminate disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
        <View className="demo-item">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content">
            <Checkbox size="large" indeterminate disabled>
              Checkbox
            </Checkbox>
          </View>
        </View>
      </View>

      <Text className="demo-title">Fuction</Text>
      <View className="demo-content">
        <View className="demo-item">
          <Checkbox
            onChange={(checked) => {
              console.log(checked);
              alert(`${checked ? 'agree' : 'disagree'}`);
            }}
          >
            Agree
          </Checkbox>
        </View>
      </View>
    </View>
  );
};
// render(<CheckboxDemo />, null, { driver: DriverUniversal });
 export default CheckboxDemo