import React, { PropTypes } from 'react';

import HelpButton from './HelpButton';
import { KD_STATE, KD_COUNTRY } from '../../constants';

function Checkboxes({ data, selecteds, type, onChange }) {
  if (!(type === KD_STATE || type === KD_COUNTRY)) {
    return null;
  }

  const options = data[type];

  return (
    <div className="o-layout c-kd-select-geography">
      <HelpButton type={type} />
      {
        options.map(option => (
          <div
            key={option.value}
            className="u-1/2 o-layout__item c-kd-select-geography__checkbox-container"
          >
            <input
              id={option.value}
              type="checkbox"
              value={option.value}
              checked={selecteds.includes(option.value)}
              onChange={(event) => {
                const { value, checked } = event.target;
                onChange({ value, checked });
              }}
            />
            <label
              htmlFor={option.value}
              className="c-kd-select-geography__checkbox-label"
            >
              {option.label}
            </label>
          </div>
        ))
      }
    </div>
  );
}

Checkboxes.propTypes = {
  data: PropTypes.shape({
    value: PropTypes.string,
    label: PropTypes.string,
    data: PropTypes.arrayOf(
      PropTypes.shape({
        value: PropTypes.string,
        label: PropTypes.string,
        entityType: PropTypes.string,
      }),
    ),
  }).isRequired,
  type: PropTypes.string.isRequired,
  selecteds: PropTypes.arrayOf(PropTypes.string),
  onChange: PropTypes.func,
};

export default Checkboxes;
