import React from 'react';
import ReactDOM from 'react-dom';
import Step from '..';
import { Button, Radio } from '../..';
import { useState } from 'react';
const Step1Content = () => {
    const [conditions, setconditions] = useState([]);
    const createNewSelectItem = () => {
        const newType = {
            type: 'null',
            fieldName: 'null',
        };
        const newConditions = [...conditions, newType];
        setconditions(newConditions);
    };
    return (React.createElement("div", null,
        conditions && conditions.length > 0 &&
            conditions.map((item, index) => React.createElement("div", { key: `step-content-${index}`, style: { width: '100%', maxWidth: 200, height: 20, background: '#2196f3', margin: '10px 0' } })),
        React.createElement(Button, { onClick: createNewSelectItem }, "add new div")));
};
const CreateDemo = () => {
    const [direction, setDirection] = useState('ver');
    const [shape, setShape] = useState('circle');
    return (React.createElement("div", null,
        React.createElement(Radio.Group, { style: { padding: 30 }, shape: "button", value: direction, onChange: direction => setDirection(direction) },
            React.createElement(Radio, { value: 'hoz' }, "hoz"),
            React.createElement(Radio, { value: 'ver' }, "ver")),
        React.createElement(Radio.Group, { style: { padding: 30 }, shape: "button", value: direction, onChange: shape => setShape(shape) },
            React.createElement(Radio, { value: 'dot' }, "dot"),
            React.createElement(Radio, { value: 'circle' }, "circle")),
        React.createElement(Step, { current: 1, direction: direction, shape: shape, stretch: true, animation: true, style: { marginTop: 30 } },
            React.createElement(Step.Item, { title: 'What would youlike to test?', content: 'test' }),
            React.createElement(Step.Item, { title: 'What would youlike to test?', content: React.createElement(Step1Content, null) }),
            React.createElement(Step.Item, { title: 'A bit more on the background', content: 'test' }))));
};
ReactDOM.render(React.createElement(CreateDemo, null), document.getElementById('step-demo-2'));
