import Radio from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const RadioGroup = Radio.Group;
const list = [
    {
        value: 'apple',
        label: 'Apple',
        disabled: false,
    },
    {
        value: 'pear',
        label: 'Pear',
    },
    {
        value: 'banana',
        label: 'banana',
    },
    {
        value: 'orange',
        label: 'Orange',
        disabled: true,
    },
];
const typeList = [
    {
        value: 'outline',
        label: 'outline',
    },
    {
        value: 'solid',
        label: 'solid',
    },
    {
        value: 'container',
        label: 'container',
    },
];
const themeList = [
    {
        value: 'white',
        label: 'white',
    },
    {
        value: 'grey',
        label: 'grey',
    },
];
class ControlApp extends React.Component {
    constructor(props) {
        super(props);
        this.handletype = type => {
            this.setState({ type });
        };
        this.handletheme = theme => {
            this.setState({ theme });
        };
        this.state = {
            value1: 'apple',
            value2: 'apple',
            value3: '',
            type: 'outline',
            theme: 'white',
        };
        this.onNestChange = this.onNestChange.bind(this);
        this.onSmallChange = this.onSmallChange.bind(this);
        this.onMediumChange = this.onMediumChange.bind(this);
    }
    onSmallChange(value) {
        this.setState({
            value1: value,
        });
    }
    onMediumChange(value) {
        this.setState({
            value2: value,
        });
    }
    onNestChange(value) {
        this.setState({
            value3: value,
        });
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("p", { style: { fontSize: 14 } }, "choose type"),
            React.createElement(Radio.Group, { defaultValue: "medium", dataSource: typeList, value: this.state.type, onChange: this.handletype }),
            React.createElement("p", { style: { fontSize: 14 } }, "choose theme"),
            React.createElement(Radio.Group, { defaultValue: "medium", dataSource: themeList, value: this.state.theme, onChange: this.handletheme }),
            React.createElement("div", { style: { background: this.state.theme === 'grey' ? '#f3f3f3' : '#fff', padding: '10px' } },
                React.createElement("p", { style: { fontSize: 14 } }, "xs size"),
                React.createElement(RadioGroup, { dataSource: list, theme: this.state.theme, size: "xs", shape: "button", value: this.state.value1, onChange: this.onSmallChange, type: this.state.type }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("p", { style: { fontSize: 14 } }, "Small size"),
                React.createElement(RadioGroup, { dataSource: list, shape: "button", size: "small", value: this.state.value1, onChange: this.onSmallChange, theme: this.state.theme, type: this.state.type }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("p", { style: { fontSize: 14 } }, "Medium size (default)"),
                React.createElement(RadioGroup, { dataSource: list, shape: "button", size: "medium", value: this.state.value2, onChange: this.onMediumChange, theme: this.state.theme, type: this.state.type }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("p", { style: { fontSize: 14 } }, "Large size"),
                React.createElement(RadioGroup, { shape: "button", size: "large", value: this.state.value3, onChange: this.onNestChange, theme: this.state.theme, type: this.state.type },
                    React.createElement(Radio, { id: "banana", value: "banana" }, "Banana"),
                    React.createElement(Radio, { id: "watermelon", value: "watermelon" }, "Watermelon"),
                    React.createElement(Radio, { id: "peach", value: "peach" }, "Peach")),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("p", { style: { fontSize: 14 } }, "Disabled and Selected-Disabled status"),
                React.createElement(RadioGroup, { shape: "button", theme: this.state.theme, type: this.state.type, value: "banana", onChange: this.onNestChange },
                    React.createElement(Radio, { id: "peach", disabled: true, value: "peach" }, "Peach"),
                    React.createElement(Radio, { id: "banana", disabled: true, value: "banana" }, "Banana")))));
    }
}
ReactDOM.render(React.createElement(ControlApp, null), document.getElementById('radio-demo-7'));
