import React from 'react'

export default function Checkbox({
  id, label, showLabel, showOther, inline, options, defaults,
  hint, showHint, tag, required, errorEmptyData
}) {

  const checkboxes = options.map(
    (label, index) => {
      return (
        <div key={ `${id}_${index}` } className="constructor__checkbox-container">
          <input id={ `checkbox_${id}_${index}` } className="custom-checkbox" type="checkbox" value={ label } checked={ -1 < defaults.indexOf(label) } onChange={ e => e } />
          <label htmlFor={ `checkbox_${id}_${index}` }>{label}</label>
        </div>
      )
    }
  ).concat(
    showOther ? [(
      <div key={ `${id}_${options.length}` } className="constructor__checkbox-container">
        <input id={ `checkbox_${id}_${options.length}` } className="custom-checkbox" value="other" onChange={ e => e } />
        <label htmlFor={ `checkbox_${id}_${options.length}` }>
          <input className="input-default input-default_light input-other" type="text" readOnly="readOnly" />
        </label>
      </div>
    )] : []
  )

  return (
    <>
      {
        showLabel ? (
          <div className="constructor__component-title">
            { label }
          </div>
        ) : null
      }

      {
        inline ? (
          <div className="flex">
            { checkboxes }
          </div>
        ) : checkboxes
      }

      {
        showHint ? (
          <div className="constructor__component-description">
            { hint }
          </div>
        ) : null
      }
    </>
  )
}