import React, { Component } from 'react';
import './index.less';
import Assets from '@src/components/Assets';

function getKey(type, index, selected, answer) {
  return `${(selected[type] || [])[index] ? 'selected' : ''} ${(answer[type] || [])[index] ? 'true' : 'false'}`;
}

export default class AnswerSelect extends Component {
  constructor(props) {
    super(props);
    const select = [];
    for (let i = 0; i < props.list.length; i += 1) {
      select[i] = false;
    }
    let index = -1;
    const { selected = {}, answer = {}, type } = props;
    let result = true;
    (selected[type] || []).forEach((row, i) => {
      if (row) index = i;
      if (row !== answer[type][i]) result = false;
    });
    this.state = { selecting: false, select, index, result };
  }

  onChange(index) {
    const { onChange } = this.props;
    const { select } = this.state;
    for (let i = 0; i < select.length; i += 1) {
      select[i] = false;
    }
    select[index] = true;
    if (onChange) onChange(select);
    this.close();
    this.setState({ index });
  }

  open() {
    this.setState({ selecting: true });
  }

  close() {
    this.setState({ selecting: false });
  }

  render() {
    const { selecting, index, result } = this.state;
    const { list = [], show, selected = {}, answer = {}, type, fix } = this.props;
    const title = list.length > 0 && index >= 0 ? list[index] : ' ';
    return (
      <div className="answer-select">
        <div hidden={!selecting} className="mask" onClick={() => this.close()} />
        <div className={`select-warp ${show ? (result ? 'true' : 'false') : ''}`}>
          <div className="text" onClick={() => this.open()}>
            {` ${title}`}
            <Assets name="chooser_icon" />
          </div>
          <div className={`select-body ${selecting ? 'select' : ''}`}>
            {list.map((item, i) => {
              return (
                <div className={`item ${getKey(type, i, selected, answer)} ${show ? 'show' : ''}`} onClick={() => !fix && this.onChange(i)}>
                  <div className="icon" />{item}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}