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

const StepDemo = () => {
  const [curStep, setStep] = useState(-1);
  const [disabledSteps, setDisabledSteps] = useState([]);
  const [globalDisabled, setGlobalDisabled] = useState(false);

  return (
    <View>
      <View className="demo-content">
        <View className="demo-item-line">
          <Text className="demo-item-name">Global</Text>
          <View class="demo-item-content">
            <Switch value={globalDisabled} onChange={setGlobalDisabled} />
          </View>
        </View>
        <View className="demo-item-line">
          <Text className="demo-item-name">Cur Step</Text>
          <View class="demo-item-content">
            <Radio.Group onChange={(v) => setStep(v)} direction="hoz" value={curStep} dataSource={[0, 1, 2, 3, 4]} />
          </View>
        </View>
        <View className="demo-item-line">
          <Text className="demo-item-name">Disabled Steps</Text>
          <View class="demo-item-content">
            <Checkbox.Group onChange={(v) => setDisabledSteps(v)} value={disabledSteps} dataSource={[0, 1, 2, 3, 4]} />
          </View>
        </View>
      </View>

      <Text className="demo-title">dot</Text>
      <View className="demo-content">
        <Step shape="dot" current={curStep}>
          <Step.Item title={'步骤 1'} disabled={globalDisabled || disabledSteps.indexOf(0) > -1} content="描述文案" />
          <Step.Item title={'步骤 2'} disabled={globalDisabled || disabledSteps.indexOf(1) > -1} content="描述文案" />
          <Step.Item title={'步骤 3'} disabled={globalDisabled || disabledSteps.indexOf(2) > -1} content="描述文案" />
          <Step.Item title={'步骤 4'} disabled={globalDisabled || disabledSteps.indexOf(3) > -1} content="描述文案" />
          <Step.Item title={'步骤 5'} disabled={globalDisabled || disabledSteps.indexOf(4) > -1} content="描述文案" />
        </Step>
      </View>
      <Text className="demo-title">circle</Text>
      <View className="demo-content">
        <Step shape="circle" current={curStep}>
          <Step.Item title={'步骤 1'} disabled={globalDisabled || disabledSteps.indexOf(0) > -1} content="描述文案" />
          <Step.Item title={'步骤 2'} disabled={globalDisabled || disabledSteps.indexOf(1) > -1} content="描述文案" />
          <Step.Item title={'步骤 3'} disabled={globalDisabled || disabledSteps.indexOf(2) > -1} content="描述文案" />
          <Step.Item title={'步骤 4'} disabled={globalDisabled || disabledSteps.indexOf(3) > -1} content="描述文案" />
          <Step.Item title={'步骤 5'} disabled={globalDisabled || disabledSteps.indexOf(4) > -1} content="描述文案" />
        </Step>
      </View>
      <Text className="demo-title">arrow</Text>
      <View className="demo-content">
        <Step shape="arrow" current={curStep}>
          <Step.Item title={'步骤 1'} disabled={globalDisabled || disabledSteps.indexOf(0) > -1} />
          <Step.Item title={'步骤 2'} disabled={globalDisabled || disabledSteps.indexOf(1) > -1} />
          <Step.Item title={'步骤 3'} disabled={globalDisabled || disabledSteps.indexOf(2) > -1} />
          <Step.Item title={'步骤 4'} disabled={globalDisabled || disabledSteps.indexOf(3) > -1} />
          <Step.Item title={'步骤 5'} disabled={globalDisabled || disabledSteps.indexOf(4) > -1} />
        </Step>
      </View>
    </View>
  );
};
// render(<StepDemo />, null, { driver: DriverUniversal });
 export default StepDemo