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 (<div>
    {
      conditions && conditions.length > 0 &&
            conditions.map((item, index) =>
              <div key={`step-content-${index}`} style={{ width: '100%', maxWidth: 200, height: 20, background: '#2196f3', margin: '10px 0' }}/>,
            )
    }
    <Button onClick={createNewSelectItem}>add new div</Button>
  </div>);
};
const CreateDemo = () => {

  const [ direction, setDirection ] = useState<'ver' | 'hoz'>('ver');
  const [ shape, setShape ] = useState<'circle' | 'arrow' | 'dot'>('circle');

  return (
    <div>
      <Radio.Group
        style={{ padding: 30 }}
        shape="button"
        value={direction}
        onChange={direction => setDirection(direction as React.SetStateAction<'ver' | 'hoz'>)}
      >
        <Radio value={'hoz'}>hoz</Radio>
        <Radio value={'ver'}>ver</Radio>
      </Radio.Group>

      <Radio.Group
        style={{ padding: 30 }}
        shape="button"
        value={direction}
        onChange={shape => setShape(shape as React.SetStateAction<'circle' | 'arrow' | 'dot'>)}
      >
        <Radio value={'dot'}>dot</Radio>
        <Radio value={'circle'}>circle</Radio>
      </Radio.Group>

      <Step current={1} direction={direction} shape={shape} stretch animation style={{ marginTop: 30 }}>
        <Step.Item title={'What would youlike to test?'} content={'test'} />
        <Step.Item title={'What would youlike to test?'} content={<Step1Content />} />
        <Step.Item title={'A bit more on the background'} content={'test'} />
      </Step>
    </div>
  );
};
ReactDOM.render(<CreateDemo/>, document.getElementById('step-demo-2'));