import React from 'react';
import './index.less';
import CheckboxItem from '../CheckboxItem';

function AnswerCheckbox(props) {
  const { selected = [], answer = [], show, list = [], onChange } = props;
  // const trueList = [];
  const falseList = [];
  const map = {};
  answer.forEach(row => {
    map[row] = true;
  });
  selected.forEach(row => {
    if (!map[row]) falseList.push(row);
  });

  return (
    <div className="answer-checkbox">
      {list.map((item) => {
        return (
          <div className={`item ${answer.indexOf(item.value) >= 0 ? 'true' : ''} ${falseList.indexOf(item.value) >= 0 ? 'false' : ''} ${show ? 'show' : ''}`} onClick={() => {
            const index = selected.indexOf(item.value);
            if (index >= 0) {
              selected.splice(index, 1);
            } else {
              selected.push(item.value);
            }
            if (onChange) onChange(selected);
          }}>
            <CheckboxItem checked={selected.indexOf(item.value) >= 0} />
            <div className="text">{item.label}</div>
            <div className="icon" />
          </div>
        );
      })}
    </div>
  );
}
AnswerCheckbox.propTypes = {};
export default AnswerCheckbox;