import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Step } from "../src/index";

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

storiesOf("Step", module).add("Step", () => {
  return (
    <div id='app-wrapper'>
      <div id='app' style={{ padding: '16px' }}>
        <p>circle</p>
        <Step current={1} shape="circle">
          {steps}
        </Step>
        <Step current={1} shape="circle" size='small'>
          <Step.Item
            title="正在处理"
            status="finish"
          />
          <Step.Item
            title="等待处理"
            status="process"
          />
          <Step.Item
            title="等待处理"
            status="wait"
          />
        </Step>
        <br/>
        <br/>
        <Step current={1} shape="circle" labelPlacement="hoz">
          <Step.Item
            title="处理完成"
            status="finish"
          />
          <Step.Item
            title="正在处理"
            status="process"
          />
          <Step.Item
            title="等待处理"
            status="wait"
          />
        </Step>
        <br/>
        <br/>
        <Step current={1} shape="circle" labelPlacement="hoz" size='small'>
          <Step.Item
            title="处理完成"
            status="finish"
          />
          <Step.Item
            title="处理完成"
            status="finish"
          />
          <Step.Item
            title="正在处理"
            status="process"
          />
        </Step>
        <br/>
        <br/>
        <Step current={1} shape="circle" labelPlacement="hoz" direction='ver'>
          <Step.Item
            title="处理完成"
            status="finish"
            content="这里是一句话描述文案"
          />
          <Step.Item
            title="处理完成"
            status="finish"
            content="这里是一句话描述文案"
          />
          <Step.Item
            title="正在处理"
            status="process"
            content="这里是一句话描述文案"
          />
        </Step>
        <br/>
        <br/>
        <p>dot 和 图标</p>
        {/* <Step current={1} shape="dot" >
          {steps}
        </Step> */}
        <Step current={2} animation={true} shape="dot" direction='ver'>
          <Step.Item
            title="正在处理"
            content='1111111111ssdfsdfsdfsdfsdfsdfsdfsdfsdfsdf'
            status="process"
          />
          <Step.Item
            title="等待处理"
            status="wait"
          />
          <Step.Item
            title="等待处理"
            status="wait"
          />
        </Step>
        <br />
        <br />
        <Step current={1} animation={false} direction="hoz" shape="dot">
          <Step.Item
            title="正在处理"
            content="这里是话描述文案"
            icon="calendar"
            status="process"
          />
          <Step.Item
            title="等待处理"
            content="这里是话描述文案"
            icon="cry"
            status="wait"
          />
          <Step.Item
            title="等待处理"
            content="这里是话描述文案"
            icon="smile"
            status="wait"
          />
        </Step>
        <br/>
        <br/>
        <p>arrow</p>
        <div style={{ padding: '16px' }}>
        <Step current={1} shape="arrow" hasbackground="false" size='small'>
          <Step.Item title="Step 1" />
          <Step.Item title="Step 2" />
          <Step.Item title="Step 3" />
          <Step.Item title="Step 4" disabled/>
        </Step>
        </div>
        
        <Step current={2} shape="arrow" size='small'>
          <Step.Item title="Step 1" />
          <Step.Item title="Step 2" />
          <Step.Item title="Step 3" />
          <Step.Item title="Step 4"/>
        </Step>
        <Step current={1} shape="line">
          <Step.Item title="Step 1" content="这里是话描述文案"/>
          <Step.Item title="Step 2" content="这里是话描述文案"/>
          <Step.Item title="Step 3" content="这里是话描述文案"/>
          <Step.Item title="Step 4" content="这里是话描述文案"/>
        </Step>
        <br />
        <br />
      </div>
    </div>
  );
});