import classNames from 'classnames';
import React, { PropTypes } from 'react';

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

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

  const options = data[type];

  return (
    <div
      className={
        classNames(
          'o-layout',
          'c-kd-select-geography',
          theme['o-layout'],
          theme['c-kd-select-geography'],
        )
      }
    >
      <HelpButton theme={theme} type={type} />
      {
        options.map(option => (
          <div
            key={option.value}
            className={
              classNames(
                'u-1/2',
                'o-layout__item',
                'c-kd-select-geography__checkbox-container',
                theme['u-1/2'],
                theme['o-layout__item'],
                theme['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={classNames('c-kd-select-geography__checkbox-label', theme['c-kd-select-geography__checkbox-label'])}
            >
              {option.label}
            </label>
          </div>
        ))
      }
    </div>
  );
}

Checkboxes.propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  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;
