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

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

const ProgressDemo = () => {
  const [percent, setPercent] = useState(66);
  useEffect(() => {
    let timer = setTimeout(() => {
      clearTimeout(timer);
      if (percent + 1 <= 100) {
        setPercent(percent + 1);
      } else {
        setPercent(0);
      }
    }, 500);
    return () => {
      clearTimeout(timer);
    };
  }, [percent]);
  return (
    <View>
      <Text className="demo-title">Progress</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <Progress size="large" percent={percent} />
            <Progress size="large" percent={percent} shape="circle" />
          </View>
        </View>
      </View>
      <Text className="demo-title">Size</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <Progress size="small" percent={percent} />
            <Progress size="medium" percent={percent} />
            <Progress size="large" percent={percent} />
            <View className="demo-items">
              <Progress size="small" percent={percent} shape="circle" />
              <Progress size="medium" percent={percent} shape="circle" />
              <Progress size="large" percent={percent} shape="circle" />
            </View>
          </View>
        </View>
      </View>
      <Text className="demo-title">Progressive</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <Progress size="large" percent={22} progressive />
            <Progress size="large" percent={55} progressive />
            <Progress size="large" percent={88} progressive />
            <View className="demo-items">
              <Progress size="large" percent={22} shape="circle" progressive />
              <Progress size="large" percent={55} shape="circle" progressive />
              <Progress size="large" percent={88} shape="circle" progressive />
            </View>
          </View>
        </View>
      </View>
      <Text className="demo-title">Color</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <Progress size="large" percent={percent} color="#209BFA" />
            <Progress size="large" percent={percent} color="#EB2F2F" />
            <Progress size="large" percent={percent} color="#05D161" />
            <View className="demo-items">
              <Progress size="large" percent={percent} shape="circle" color="#000" />
              <Progress size="large" percent={percent} shape="circle" color="#EB2F2F" />
              <Progress size="large" percent={percent} shape="circle" color="#05D161" />
            </View>
          </View>
        </View>
      </View>
      <Text className="demo-title">BackgroundColor</Text>
      <View className="demo-content">
        <View className="demo-item">
          <View className="demo-item-content">
            <Progress size="large" percent={percent} color="#209BFA" backgroundColor="#ffdcd6" />
            <Progress size="large" percent={percent} color="#EB2F2F" backgroundColor="#ffdcd6" />
            <Progress size="large" percent={percent} color="#05D161" backgroundColor="#ffdcd6" />
            <View className="demo-items">
              <Progress size="large" percent={percent} shape="circle" color="#209BFA" backgroundColor="#ffdcd6" />
              <Progress size="large" percent={percent} shape="circle" color="#EB2F2F" backgroundColor="#ffdcd6" />
              <Progress size="large" percent={percent} shape="circle" color="#05D161" backgroundColor="#ffdcd6" />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

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