import styles from './index.less';
import ListItem from './ListItem';

const CheckBoxDiy = ({
  className = '',
  style,
  name,
  formKey,
  options = [],
  values,
  onChange,
  single = false,
}) => {
  const value = values[formKey];
  function toggle(option) {
    const newVal = single
      ? value === option.key
        ? undefined
        : option.key
      : value && value.includes(option.key)
      ? value.filter(k => k !== option.key)
      : (value || []).concat([option.key]);
    onChange({...values, [formKey]: newVal});
  }
  return (
    <div className={styles.wrapper + ' ' + className} style={style}>
      <div className={styles.title}>{name}</div>
      <div className={styles.list}>
        {options.map(option => (
          <ListItem
            key={option.key}
            name={option.name}
            onClick={() => toggle(option)}
            active={single ? value === option.key : value && value.includes(option.key)}
          />
        ))}
      </div>
    </div>
  );
};
export default CheckBoxDiy;
