import React from 'react';
import ReactDOM from 'react-dom';
import Step from '..';
import { Radio } from '../..';
import { useState } from 'react';

const steps = [[ 'Step 1', 'Open the refrigerator door' ], [ 'Step 2', 'Put the elephant in the refrigerator' ], [ 'Step 3', 'Close the refrigerator door' ], [ 'Step 4', 'Open the refrigerator door' ]].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} key={index} title={item[0]} content={item[1]}/>);
const steps2 = [[ 'Step 1' ], [ 'Step 2' ], [ 'Step 3' ], [ 'Step 4' ]].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} key={index} title={item}/>);

const CreateDemo = () => {
  const [ size, setSize ] = useState<'medium' | 'small'>('medium');

  return (
    <div>
      <Radio.Group
        style={{ padding: 30 }}
        shape="button"
        value={size}
        onChange={(v: string) => setSize(v as 'medium' | 'small')}
      >
        <Radio value={'medium'}>medium</Radio>
        <Radio value={'small'}>small</Radio>
      </Radio.Group>
      <h3> Basic 2 </h3>
      <p>通过labelPlacement="hoz"展示</p>
      <h4> Enabled </h4>
      <Step current={-1} stretch shape="circle" size={size}>
        {steps2}
      </Step>

      <h4> Active </h4>
      <Step current={1} stretch shape="circle" size={size}>
        {steps2}
      </Step>

      <h4> Disabled </h4>
      <Step current={1} stretch shape="circle" size={size}>
        <Step.Item title="处理完成" content="这里是描述文案" disabled={true}/>
        <Step.Item title="正在处理" content="这里是描述文案" disabled={true}/>
        <Step.Item title="等待处理" content="这里是描述文案" disabled={true}/>
        <Step.Item title="等待处理" content="这里是描述文案" disabled={true}/>
      </Step>

      <h4>with Content</h4>
      <Step current={2} stretch shape="circle" size={size}>
        {steps}
      </Step>

      <h4>Error</h4>
      <Step current={1} stretch shape="circle" size={size}>
        <Step.Item title="处理完成处理完成处理完成处理完成" info="处理完成处理完成处理完成处理完成"/>
        <Step.Item title="正在处理" error info="123"/>
        <Step.Item title="等待处理" />
        <Step.Item title="等待处理" />
      </Step>

      <h4>with Process</h4>
      <Step current={1} stretch shape="circle" size={size}>
        <Step.Item title="处理完成" content="这里是描述文案"/>
        <Step.Item title="正在处理" content="这里是描述文案" percent={60}/>
        <Step.Item title="等待处理" content="这里是描述文案"/>
        <Step.Item title="等待处理" content="这里是描述文案"/>
      </Step>


      <br />
      <br />
      <br />
      <br />
      <h3>Basic3</h3>
      <h4>Enabled</h4>
      <Step current={-1} stretch shape="dot" size={size}>
        <Step.Item title="STEP1" content="等待处理"/>
        <Step.Item title="STEP2" content="等待处理"/>
        <Step.Item title="STEP3" content="等待处理"/>
      </Step>

      <h4>Active</h4>
      <Step current={1} stretch shape="dot" size={size}>
        <Step.Item title="STEP1" content="处理完成"/>
        <Step.Item title="STEP2" content="当前"/>
        <Step.Item title="STEP3" content="等待处理"/>
      </Step>

      <h4>Disabled</h4>
      <Step current={1} stretch shape="dot" size={size}>
        <Step.Item title="STEP1" content="处理完成" disabled={true}/>
        <Step.Item title="STEP2" content="当前" disabled={true}/>
        <Step.Item title="STEP3" content="等待处理" disabled={true}/>
      </Step>

      <h4>Error</h4>
      <Step current={1} stretch shape="dot" size={size}>
        <Step.Item title="STEP1" content="处理完成"/>
        <Step.Item title="STEP2" content="当前" error/>
        <Step.Item title="STEP3" content="等待处理"/>
      </Step>

      <br />
      <br />
      <br />
      <br />
      <h3>With Icon</h3>
      <h4>Enabled</h4>
      <Step current={-1} stretch animation={false} labelPlacement="ver" size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" />
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" icon="calendar"/>
        <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" />
        <Step.Item title="Step 4" content="Close the refrigerator door" icon="smile" />
      </Step>
      <h4>Active</h4>
      <Step current={1} stretch animation={false} labelPlacement="ver" size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" />
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" icon="calendar"/>
        <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" />
        <Step.Item title="Step 4" content="Close the refrigerator door" icon="smile" />
      </Step>
      <h4>Disabled</h4>
      <Step current={1} stretch animation={false} labelPlacement="ver" size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" disabled/>
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" icon="calendar" disabled/>
        <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" disabled/>
        <Step.Item title="Step 4" content="Close the refrigerator door" icon="smile" disabled/>
      </Step>
      <h4>Error</h4>
      <Step current={1} stretch animation={false} labelPlacement="ver" size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar"/>
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" icon="calendar" error/>
        <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile"/>
        <Step.Item title="Step 4" content="Close the refrigerator door" icon="smile"/>
      </Step>

      <br />
      <br />
      <br />
      <br />
      <h3>Rounded Bar</h3>
      <h4>Enabled</h4>
      <Step shape="arrow" current={-1} stretch animation={false} size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" />
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" />
        <Step.Item title="Step 3" content="Close the refrigerator door"/>
        <Step.Item title="Step 4" content="Close the refrigerator door"/>
      </Step>
      <h4>Active</h4>
      <Step shape="arrow" current={1} stretch animation={false} size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door"/>
        <Step.Item title="Step 1" content="Open the refrigerator door" />
        <Step.Item title="Step 1" content="Open the refrigerator door" />
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" />
        <Step.Item title="Step 3" content="Close the refrigerator door" />
        <Step.Item title="Step 4" content="Close the refrigerator door" />
      </Step>
      <h4>Disabled</h4>
      <Step shape="arrow" current={3} stretch animation={false} size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" disabled/>
        <Step.Item title="Step 1" content="Open the refrigerator door" disabled/>
        <Step.Item title="Step 1" content="Open the refrigerator door" disabled/>
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" disabled/>
        <Step.Item title="Step 3" content="Close the refrigerator door" disabled/>
        <Step.Item title="Step 4" content="Close the refrigerator door" disabled/>
      </Step>
      <h4>Error</h4>
      <Step shape="arrow" current={1} stretch animation={false} size={size}>
        <Step.Item title="Step 1" content="Open the refrigerator door" />
        <Step.Item title="Step 2" content="Put the elephant in the refrigerator" error/>
        <Step.Item title="Step 3" content="Close the refrigerator door" />
        <Step.Item title="Step 4" content="Close the refrigerator door" />
      </Step>
    </div>
  );
};

ReactDOM.render(<CreateDemo/>, document.getElementById('step-demo-1'));