import { Grid, Row, Form, Col, FormGroup, HelpBlock, ControlLabel, FormControl, InputGroup, Button, Panel, Glyphicon } from 'react-bootstrap'

const AddonHorizontal = ({addon, addonText}) => {
  let res = null
  if (addon) {
    res = (<Addon>
             <Glyphicon glyph={addon} />
           </Addon> )
  } else if (addonText) {
    res = (<Addon>
             {addonText}
           </Addon>)
  }
  return res
}

AddonHorizontal.propTypes = {
  addon: PropTypes.string,
  addonText: PropTypes.string
}

const InputGroupHorizontal = ({ addon, addonText, field, type = 'text', label }) => {
  const validationState = () => {
    if (field.error && field.touched) {
      return 'error'
    } else if (field.touched && field.valid) {
      return 'success'
    }
  }
  return (<InputGroup>
            <AddonHorizontal addon={addon} addonText={addonText} />
            <FormControl
              type={type}
              placeholder={label}
              {...field}
              validationState={validationState()} />
          </InputGroup>)
}

const FormGroupHorizontal = ({controlId, type = 'text', label, field, addon, addonText}) => (
  <FormGroup controlId={controlId}>
    <Col componentClass={ControlLabel} sm={4}>
    {label}
    </Col>
    <Col sm={8}>
    <InputGroupHorizontal
      type={type}
      label={label}
      addon={addon}
      addonText={addonText}
      field={field} />
    <Feedback />
    <HelpBlock>
      {field.touched && field.error ? field.error : null}
    </HelpBlock>
    </Col>
  </FormGroup>
)

FormGroupHorizontal.propTypes = {
  controlId: PropTypes.string.isRequired,
  type: PropTypes.string,
  label: PropTypes.string.isRequired,
  field: PropTypes.object.isRequired,
  addon: PropTypes.string,
  addonText: PropTypes.string
}

FormGroupHorizontal.defaultProps = {
  type: 'text'
}

const SubmitButton = ({handleSubmit, submitting, pristine}) => {
  const indicator = (<Loading
                       type='spokes'
                       color='#e3e3e3'
                       height={32}
                       width={32} />)

  return (<Button
            onClick={handleSubmit}
            type='submit'
            disabled={submitting || pristine}
            bsStyle='primary'>
            {submitting ? 'Submitting' : 'Submit'}
            {submitting ? indicator : null}
          </Button>)
}

const DeliveryComponent = ({ fields: { firstName, lastName, email, contactNumber, altContactNumber }, submitting, pristine, handleSubmit }) => (
  <Row>
    <Col sm={6} smOffset={2}>
    <Grid fluid>
      <Panel header={title} bsStyle='primary'>
        <Form horizontal controlId='test-delivery-form'>
          <FormGroupHorizontal controlId='first-name-group' label='First name' field={firstName} />
          <FormGroupHorizontal controlId='last-name-group' label='Last name' field={lastName} />
          <FormGroupHorizontal
            controlId='email-group'
            label='Email'
            field={email}
            addonText='@' />
          <FormGroupHorizontal
            controlId='phone-group'
            type='tel'
            label='Contact Number'
            addon='earphone'
            field={contactNumber} />
          <FormGroupHorizontal
            controlId='alt-phone-group'
            type='tel'
            label='Alternate Contact Number'
            addon='phone-alt'
            field={altContactNumber} />
          <FormGroup>
            <Col sm={8} smOffset={6}>
            <SubmitButton handleSubmit={handleSubmit} submitting={submitting} pristine={pristine} />
            </Col>
          </FormGroup>
        </Form>
      </Panel>
    </Grid>
    </Col>
  </Row>
)

DeliveryComponent.propTypes = {
  handleSubmit: PropTypes.func,
  fields: PropTypes.object,
  submitting: PropTypes.bool,
  pristine: PropTypes.bool
}