import './demo8.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Step from '..';
import { Button, Icon, Select } from '../..';
const StepItem = Step.Item, ButtonGroup = Button.Group;
const renders = {
    1: function itemRender1(index) {
        return React.createElement("div", { className: "custom-node1" },
            React.createElement("span", null, index + 1));
    },
    2: function itemRender2(index, status) {
        return React.createElement("div", { className: "custom-node2" },
            status === 'finish' ? React.createElement(Icon, { type: "success" }) : React.createElement("span", null, index + 1),
            " ");
    },
};
const contents = [
    'Description1',
    'Description2 --- Very Looooooooooooooooooooooog content',
    'Description3',
];
class Component extends React.Component {
    constructor(props) {
        super(props);
        this.onClick = currentStep => {
            console.log(currentStep);
            this.setState({
                currentStep,
            });
        };
        this.state = {
            currentStep: 1,
            stepType: 'circle',
            stepAnimation: true,
            labelPlacement: 'ver',
        };
    }
    next() {
        const s = this.state.currentStep + 1;
        this.setState({
            currentStep: s > 6 ? 6 : s,
        });
    }
    prev() {
        const s = this.state.currentStep - 1;
        this.setState({
            currentStep: s < 0 ? 0 : s,
        });
    }
    onStepTypeChange(value) {
        this.setState({ stepType: value });
    }
    onStepAnimation(value) {
        this.setState({ stepAnimation: value });
    }
    onLabelPlacementChange(value) {
        this.setState({ labelPlacement: value });
    }
    onItemRenderChange(value) {
        this.setState({ itemRender: renders[value], content: contents[value] });
    }
    render() {
        const { currentStep } = this.state;
        return (React.createElement("div", null,
            React.createElement("div", { className: "custom-step-option" },
                React.createElement(Select, { innerBefore: "shape:", placeholder: "Choose the dispaly type", onChange: this.onStepTypeChange.bind(this), className: "custom-select", defaultValue: "circle" }, ['circle', 'arrow', 'dot'].map(item => React.createElement(Select.Option, { value: item, key: item }, item))),
                React.createElement(Select, { innerBefore: "labelPlacement:", placeholder: "Label placement", onChange: this.onLabelPlacementChange.bind(this), className: "custom-select", defaultValue: "hoz" }, ['hoz', 'ver'].map(item => React.createElement(Select.Option, { value: item, key: item }, item))),
                React.createElement(Select, { innerBefore: "animation:", placeholder: "Enable animation", onChange: this.onStepAnimation.bind(this), className: "custom-select", defaultValue: true }, [true, false].map((item, index) => React.createElement(Select.Option, { value: item, key: index }, item ? 'on' : 'off'))),
                React.createElement(Select, { innerBefore: "render:", placeholder: "Choose itemRender", onChange: this.onItemRenderChange.bind(this), className: "custom-select", defaultValue: 0 }, ['ItemRender', 'ItemRender1', 'ItemRender2'].map((item, index) => React.createElement(Select.Option, { value: index, key: index }, item)))),
            React.createElement(Step, { itemRender: this.state.itemRender, current: currentStep, shape: this.state.stepType, animation: this.state.stepAnimation, labelPlacement: this.state.labelPlacement },
                React.createElement(StepItem, { title: "Step 1", onClick: this.onClick, content: "Description" }),
                React.createElement(StepItem, { title: "Step 2", onClick: this.onClick, content: "Description" }),
                React.createElement(StepItem, { title: "Step 3", onClick: this.onClick, content: this.state.content || 'Description1' }),
                React.createElement(StepItem, { title: "Step 4", onClick: this.onClick, content: "Description" }),
                React.createElement(StepItem, { title: "Step 5", onClick: this.onClick, content: "Description" }),
                React.createElement(StepItem, { title: "Step 6", onClick: this.onClick, content: "Description" })),
            React.createElement("div", { className: "steps-content" }, contents[currentStep]),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(ButtonGroup, null,
                React.createElement(Button, { onClick: this.prev.bind(this), type: "primary", disabled: currentStep === 0 }, "Backward"),
                React.createElement(Button, { onClick: this.next.bind(this), type: "primary", disabled: currentStep === 5 }, "Forward"))));
    }
}
ReactDOM.render(React.createElement(Component, null), document.getElementById('step-demo-8'));
