import React, { Fragment, useState } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';
import 'antd/dist/antd.css';
import Corn from './src/index.js';

const ml10 = { marginLeft: 10 };
const mt20 = { marginTop: 20 };

export default function CornDemo() {
    const [value, setValue] = useState('6 6 14 ? * 6 *');
    const [value2, setValue2] = useState('0 0 0 1,6 * ? *');
    const [value3, setValue3] = useState('0 0 0 L * ? *');
    const [value4, setValue4] = useState('0 0 0 L 4/12 ? *');
    return (
        <Fragment>
            <h4>普通：</h4>
            <Corn
                value={value}
                onChange={value => {
                    setValue(value);
                }}
            />
            <Button
                style={ml10}
                onClick={() => {
                    setValue('0 0 0 2 * ? *');
                }}
                type="primary"
            >
                重置
            </Button>
            {value}

            <h4 style={mt20}>多选：</h4>
            <Corn
                value={value2}
                onChange={value => {
                    setValue2(value);
                }}
                multiple
            />
            <Button
                style={ml10}
                onClick={() => {
                    setValue2('6 4 4 ? * 1,3,5 *');
                }}
                type="primary"
            >
                重置
            </Button>
            {value2}

            <h4 style={mt20}>非受控组件：</h4>
            <Corn
                defaultValue={value3}
                onChange={value => {
                    setValue3(value);
                }}
            />
            {value3}

            <h4 style={mt20}>自定义表达式：</h4>
            <Corn
                value={value4}
                onChange={value => {
                    setValue4(value);
                }}
            />
            {value4}
        </Fragment>
    );
}