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

class QAItem extends Component {
  constructor(props) {
    super(props);
    this.Text = null;
    this.state = { show: false, more: false };
    this.checkHeight();
  }

  checkHeight() {
    if (this.Text != null) {
      console.log(this.Text.offsetHeight);
      if (this.Text.offsetHeight > 80) {
        this.setState({ more: true });
      }
    } else {
      setTimeout(() => {
        this.checkHeight();
      }, 1);
    }
  }

  render() {
    const { data } = this.props;
    const { show, more } = this.state;
    return (
      <div className={`qa-item ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
        <div className="title">Q: {data.content}</div>
        <div
          ref={ref => {
            this.Text = ref;
          }}
          className="desc"
        >
          A: {data.answer}
        </div>
        {more && show && <Icon name="up" onClick={() => this.setState({ show: false })} />}
        {more && !show && <Icon name="down" onClick={() => this.setState({ show: true })} />}
      </div>
    );
  }
}

function QAList(props) {
  const { style, data = [], tabs = [], active } = props;
  return (
    <Module style={style} className="qa-list">
      {tabs.length > 0 && <Tabs
        type="division"
        theme="theme"
        active={active}
        space={2.5}
        width={100}
        tabs={tabs}
      />}
      {data.map(item => {
        return <QAItem data={item} />;
      })}
    </Module>
  );
}

QAList.propTypes = {};
export default QAList;