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) => React.createElement(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) => React.createElement(Step.Item, { "aria-current": index === 1 ? 'step' : null, key: index, title: item }));
const CreateDemo = () => {
    const [size, setSize] = useState('medium');
    return (React.createElement("div", null,
        React.createElement(Radio.Group, { style: { padding: 30 }, shape: "button", value: size, onChange: (v) => setSize(v) },
            React.createElement(Radio, { value: 'medium' }, "medium"),
            React.createElement(Radio, { value: 'small' }, "small")),
        React.createElement("h3", null, " Basic 2 "),
        React.createElement("p", null, "\u901A\u8FC7labelPlacement=\"hoz\"\u5C55\u793A"),
        React.createElement("h4", null, " Enabled "),
        React.createElement(Step, { current: -1, stretch: true, shape: "circle", size: size }, steps2),
        React.createElement("h4", null, " Active "),
        React.createElement(Step, { current: 1, stretch: true, shape: "circle", size: size }, steps2),
        React.createElement("h4", null, " Disabled "),
        React.createElement(Step, { current: 1, stretch: true, shape: "circle", size: size },
            React.createElement(Step.Item, { title: "\u5904\u7406\u5B8C\u6210", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848", disabled: true }),
            React.createElement(Step.Item, { title: "\u6B63\u5728\u5904\u7406", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848", disabled: true }),
            React.createElement(Step.Item, { title: "\u7B49\u5F85\u5904\u7406", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848", disabled: true }),
            React.createElement(Step.Item, { title: "\u7B49\u5F85\u5904\u7406", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848", disabled: true })),
        React.createElement("h4", null, "with Content"),
        React.createElement(Step, { current: 2, stretch: true, shape: "circle", size: size }, steps),
        React.createElement("h4", null, "Error"),
        React.createElement(Step, { current: 1, stretch: true, shape: "circle", size: size },
            React.createElement(Step.Item, { title: "\u5904\u7406\u5B8C\u6210\u5904\u7406\u5B8C\u6210\u5904\u7406\u5B8C\u6210\u5904\u7406\u5B8C\u6210", info: "\u5904\u7406\u5B8C\u6210\u5904\u7406\u5B8C\u6210\u5904\u7406\u5B8C\u6210\u5904\u7406\u5B8C\u6210" }),
            React.createElement(Step.Item, { title: "\u6B63\u5728\u5904\u7406", error: true, info: "123" }),
            React.createElement(Step.Item, { title: "\u7B49\u5F85\u5904\u7406" }),
            React.createElement(Step.Item, { title: "\u7B49\u5F85\u5904\u7406" })),
        React.createElement("h4", null, "with Process"),
        React.createElement(Step, { current: 1, stretch: true, shape: "circle", size: size },
            React.createElement(Step.Item, { title: "\u5904\u7406\u5B8C\u6210", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848" }),
            React.createElement(Step.Item, { title: "\u6B63\u5728\u5904\u7406", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848", percent: 60 }),
            React.createElement(Step.Item, { title: "\u7B49\u5F85\u5904\u7406", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848" }),
            React.createElement(Step.Item, { title: "\u7B49\u5F85\u5904\u7406", content: "\u8FD9\u91CC\u662F\u63CF\u8FF0\u6587\u6848" })),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("h3", null, "Basic3"),
        React.createElement("h4", null, "Enabled"),
        React.createElement(Step, { current: -1, stretch: true, shape: "dot", size: size },
            React.createElement(Step.Item, { title: "STEP1", content: "\u7B49\u5F85\u5904\u7406" }),
            React.createElement(Step.Item, { title: "STEP2", content: "\u7B49\u5F85\u5904\u7406" }),
            React.createElement(Step.Item, { title: "STEP3", content: "\u7B49\u5F85\u5904\u7406" })),
        React.createElement("h4", null, "Active"),
        React.createElement(Step, { current: 1, stretch: true, shape: "dot", size: size },
            React.createElement(Step.Item, { title: "STEP1", content: "\u5904\u7406\u5B8C\u6210" }),
            React.createElement(Step.Item, { title: "STEP2", content: "\u5F53\u524D" }),
            React.createElement(Step.Item, { title: "STEP3", content: "\u7B49\u5F85\u5904\u7406" })),
        React.createElement("h4", null, "Disabled"),
        React.createElement(Step, { current: 1, stretch: true, shape: "dot", size: size },
            React.createElement(Step.Item, { title: "STEP1", content: "\u5904\u7406\u5B8C\u6210", disabled: true }),
            React.createElement(Step.Item, { title: "STEP2", content: "\u5F53\u524D", disabled: true }),
            React.createElement(Step.Item, { title: "STEP3", content: "\u7B49\u5F85\u5904\u7406", disabled: true })),
        React.createElement("h4", null, "Error"),
        React.createElement(Step, { current: 1, stretch: true, shape: "dot", size: size },
            React.createElement(Step.Item, { title: "STEP1", content: "\u5904\u7406\u5B8C\u6210" }),
            React.createElement(Step.Item, { title: "STEP2", content: "\u5F53\u524D", error: true }),
            React.createElement(Step.Item, { title: "STEP3", content: "\u7B49\u5F85\u5904\u7406" })),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("h3", null, "With Icon"),
        React.createElement("h4", null, "Enabled"),
        React.createElement(Step, { current: -1, stretch: true, animation: false, labelPlacement: "ver", size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", icon: "calendar" }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator", icon: "calendar" }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door", icon: "smile" }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door", icon: "smile" })),
        React.createElement("h4", null, "Active"),
        React.createElement(Step, { current: 1, stretch: true, animation: false, labelPlacement: "ver", size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", icon: "calendar" }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator", icon: "calendar" }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door", icon: "smile" }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door", icon: "smile" })),
        React.createElement("h4", null, "Disabled"),
        React.createElement(Step, { current: 1, stretch: true, animation: false, labelPlacement: "ver", size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", icon: "calendar", disabled: true }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator", icon: "calendar", disabled: true }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door", icon: "smile", disabled: true }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door", icon: "smile", disabled: true })),
        React.createElement("h4", null, "Error"),
        React.createElement(Step, { current: 1, stretch: true, animation: false, labelPlacement: "ver", size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", icon: "calendar" }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator", icon: "calendar", error: true }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door", icon: "smile" }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door", icon: "smile" })),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("h3", null, "Rounded Bar"),
        React.createElement("h4", null, "Enabled"),
        React.createElement(Step, { shape: "arrow", current: -1, stretch: true, animation: false, size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator" }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door" })),
        React.createElement("h4", null, "Active"),
        React.createElement(Step, { shape: "arrow", current: 1, stretch: true, animation: false, size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator" }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door" })),
        React.createElement("h4", null, "Disabled"),
        React.createElement(Step, { shape: "arrow", current: 3, stretch: true, animation: false, size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", disabled: true }),
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", disabled: true }),
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door", disabled: true }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator", disabled: true }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door", disabled: true }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door", disabled: true })),
        React.createElement("h4", null, "Error"),
        React.createElement(Step, { shape: "arrow", current: 1, stretch: true, animation: false, size: size },
            React.createElement(Step.Item, { title: "Step 1", content: "Open the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 2", content: "Put the elephant in the refrigerator", error: true }),
            React.createElement(Step.Item, { title: "Step 3", content: "Close the refrigerator door" }),
            React.createElement(Step.Item, { title: "Step 4", content: "Close the refrigerator door" }))));
};
ReactDOM.render(React.createElement(CreateDemo, null), document.getElementById('step-demo-1'));
