import { hot } from 'react-hot-loader'
import Form, { Input, Select, Custom, Checkbox } from '../dist'

const Test = (props) => {

	const { error, onChange, getFormData, value } = props

	return <div>Hello from custom</div>
}

const App = () => {

	const onSubmit = () => {

	}

	return (
		<div className="container">
			<div className="row">
				<div className="col-6">
					<Form
						className=""
						onSubmit={onSubmit}>
						<Input
							label="User name:"
							name="name"
							validator={(value, formData) => {
								
								if (!value || !value.trim()) return false;

								return true;	
							
							}}
							errMsg="Required">
							<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
						</Input>
						<Checkbox
							name="gender"
							label="Male"
							value={true}
							validator={(value, formData) => {

								if (!value) return false;

								return true;
							}}
							errMsg="Required"
							/>

						<Select
							label="Fruite"
							name="fruit"
							multiple
							options={[
								{value: 1, label: 'apple'},
								{value: 2, label: 'banana'},
								{value: 4, label: 'others', children: [
									{value: 3, label: 'mango'},
								]},
							]}
							validator={(value, formData) => {

								if (!Array.isArray(value) || !value.length) return false;

								return true;
							}}
							errMsg="Required"
							/>

						<button type="submit" className="btn btn-primary">Submit</button>
					</Form>
				</div>
			</div>
		</div>
	)
}

const Main = hot(module)(App)

ReactDOM.render(
	<Main />,
	document.getElementById('root')
)