import { dasherize, titleize } from 'inflection'

const Input = ({ name, value, label, error }) => {

const id = `input-${dasherize(name).toLowerCase()}`
const className = `form-control ${error ? 'is-invalid' : null}`
if (label === undefined) label = titleize(name)
return (
  <div className="form-group">
    {label ? <label htmlFor={id}>{label}</label> : null}
    <input type="text" id={id} className={className} name={name} defaultValue={value} />
    {error ? <div className="invalid-feedback">{error}</div> : null}
  </div>
)

}

const TextArea = ({ name, value, label, error }) => {

const id = `input-${dasherize(name).toLowerCase()}`
const className = `form-control ${error ? 'is-invalid' : null}`
if (label === undefined) label = titleize(name)
return (
  <div className="form-group">
    {label ? <label htmlFor={id}>{label}</label> : null}
    <textarea id={id} className={className} name={name} defaultValue={value}></textarea>
    {error ? <div className="invalid-feedback">{error}</div> : null}
  </div>
)

}

const CheckBox = ({ name, value, label, error }) => {

const id = `input-${dasherize(name).toLowerCase()}`
const className = `form-check-input ${error ? 'is-invalid' : null}`
if (label === undefined) label = titleize(name)
return (
  <div className="form-group form-check">
    <input type="hidden" name={name} defaultValue={false} />
    <input type="checkbox" id={id} className={className} name={name} defaultChecked={value} />
    {error ? <div className="invalid-feedback">{error}</div> : null}
    {label ? (
      <label htmlFor={id} className="form-post-label">
        {label}
      </label>
    ) : null}
  </div>
)

}

const Select = ({ name, value, label, error, collection, selectPlaceholder = 'Select one…' }) => {

const id = `input-${dasherize(name).toLowerCase()}`
const className = `form-control ${error ? 'is-invalid' : null}`
if (label === undefined) label = titleize(name)
return (
  <div className="form-group">
    {label ? <label htmlFor={id}>{label}</label> : null}
    <select id={id} className={className} name={name} defaultValue={value}>
      {selectPlaceholder ? <option>{selectPlaceholder}</option> : null}
      {collection.map(([value, display]) => (
        <option key={value} value={value}>
          {display}
        </option>
      ))}
    </select>
    {error ? <div className="invalid-feedback">{error}</div> : null}
  </div>
)

}

const HiddenIdField = ({ id }) => (id ? <input type=“hidden” name=“id” defaultValue={id} /> : null)

export { Input, TextArea, CheckBox, Select, HiddenIdField }