import React, { Component } from 'react';
import './index.less';

export default class HardInput extends Component {
  render() {
    const { focus, answer = [], show, list = [], correct, onClick, onDelete } = this.props;
    const a = answer.length > 0 ? answer[0] : [];
    const otherList = [];
    if (show) {
      const map = {};
      list.forEach((row) => {
        map[row.uuid] = row;
      });
      a.forEach((row) => {
        if (!map[row.uuid]) otherList.push(row);
      });
    }
    return (
      <div className={`hard-input ${focus ? 'focus' : ''}`} onClick={() => {
        if (onClick) onClick();
      }}>
        {list.map((item) => {
          return (
            <div className={`item ${a.indexOf(item.uuid) >= 0 || correct ? 'true' : 'false'} ${show ? 'show' : ''}`} onClick={() => {
              if (onDelete) onDelete(item);
            }}>
              <div className="text">{item.text}</div>
              <div className="icon" />
            </div>
          );
        })}
        {otherList.map(item => {
          return (
            <div className="other-item">
              <div className="text">{item.text}</div>
            </div>
          );
        })}
      </div>
    );
  }
}