import React from 'react';
import { dripForm } from 'react-drip-form';
import { Form, FormGroup, Button } from 'react-bootstrap';
import {
  Checkbox,
  FieldGroup,
  Input,
  Radio,
  Select,
  Textarea,
} from 'react-drip-form-bootstrap';
 
const SampleForm = ({ handlers }) => (
  <Form onSubmit={handlers.onSubmit}>
    <Input
      type="text"
      name="text"
      label="Text Field"
      labelText="Text Field"
      placeholder="placeholder..."
      addonBefore={<InputGroup.Addon>Before</InputGroup.Addon>}
    />
 
    <Textarea
      name="textarea"
      label="Textarea Field"
      labelText="Textarea Field"
      placeholder="placeholder..."
      addonAfter={<InputGroup.Addon>After</InputGroup.Addon>}
    />
 
    <Select
      name="select"
      label="Select Field"
      labelText="Select Field"
    >
      <option value="">Select option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </Select>
 
    <FormGroup>
      <ControlLabel>Checkbox Group</ControlLabel>
      <FieldGroup
        multiple
        name="checkboxGroup"
        label="Checkbox Group"
      >
        <Checkbox value="checkbox1">Checkbox 1</Checkbox>
        <Checkbox value="checkbox2">Checkbox 2</Checkbox>
        <Checkbox value="checkbox3">Checkbox 3</Checkbox>
      </FieldGroup>
    </FormGroup>
 
    <FormGroup>
      <ControlLabel>Radio Group</ControlLabel>
      <FieldGroup
        name="radioGroup"
        label="Radio Group"
      >
        <Radio value="radio1">Radio 1</Radio>
        <Radio value="radio2">Radio 2</Radio>
        <Radio value="radio3">Radio 3</Radio>
      </FieldGroup>
    </FormGroup>
 
    <FormGroup>
      <Button onClick={handlers.onSubmit}>Submit</Button>
    </FormGroup>
  </Form>
);

({ meta }) => (meta.error && meta.touched && meta.dirty) ? 'error' : null