import { createElement, render } from 'rax';
import { Search } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import '../../components/index.css';

const RatingDemo = () => {
  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content-search">
            <Search size="small" defaultValue={3} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content-search">
            <Search size="medium" defaultValue={3} />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content-search">
            <Search size="large" defaultValue={3} />
          </View>
        </View>
      </View>

      <Text className="demo-title">ShowCancel</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content-search">
            <Search size="small" defaultValue={3} hasCancel />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content-search">
            <Search size="medium" defaultValue={3} hasCancel />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content-search">
            <Search
              size="large"
              defaultValue={3}
              hasCancel
              onChange={(value) => {
                console.log(value);
              }}
            />
          </View>
        </View>
      </View>

      <Text className="demo-title">ShowClear</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">small</View>
          <View className="demo-item-content-search">
            <Search size="small" value="clear" defaultValue={3} hasClear hasCancel />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">medium</View>
          <View className="demo-item-content-search">
            <Search size="medium" value="clear" defaultValue={3} hasClear hasCancel />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">large</View>
          <View className="demo-item-content-search">
            <Search
              size="large"
              value="clear"
              defaultValue={3}
              hasClear
              hasCancel
              cancelText={'一段测试'}
              onChange={(value) => {
                console.log(value);
              }}
              onCancel={() => {
                console.log('onCancel');
              }}
              onBlur={() => {
                console.log('onBlur');
              }}
              onFocus={() => {
                console.log('onFocus');
              }}
              onConfirm={() => {
                console.log('onConfirm');
              }}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

// render(<RatingDemo />, null, { driver: DU });
 export default RatingDemo 