import { h, render, Component } from 'preact'; // eslint-disable-line no-unused-vars
import HeaderLightItem from './partials/HeaderLightItem.jsx';
import GraphItem from './partials/GraphItem.jsx';

// displays the current Chart Screen depending on mode
export default class ChartScreen extends Component {

  // RENDER
  render () {
    const question = this.props.questions[this.props.currentQuestion];
    let textKey;

    // get text depending on mode
    switch (this.props.mode) {
      case 'presentation':
        textKey = 'answer1';
        break;

      case 'comparison':
        textKey = 'answer2';
        break;

      default:
        textKey = 'text';
        break;
    }

    // ... combine and render it
    return (
      <section className="wrapper  wrapper__question">
        <HeaderLightItem { ...this.props } />

        <main className="wrapper__main  wrapper--centered  wrapper__main--question">
          <div className="question  question__manipula">
            <p className="question__title">
              {question.texts[this.props.currentStep][textKey].split('\n').map(item => <span>{item}<br /></span>)}
            </p>

            { this.props.mode === 'interaction'
              ? <p className="question__instruction">{question.texts[this.props.currentStep].instruction}</p> : []
            }

            { question.texts[this.props.currentStep].hint && this.props.mode === 'interaction'
              ? <p className="question__hint">
                {question.texts[this.props.currentStep].hint.split('\n').map(item => <span>{item}<br /></span>)}
              </p>
              : []
            }
          </div>

          <div className="question__message">
            <div className="question__message--error" aria-hidden="true">{this.props.error}</div>
            <div className="question__message--done" aria-hidden="true">{this.props.done}</div>
          </div>

          <GraphItem
            interactionData={this.props.interactionData}
            comparisonData={this.props.comparisonData}
            currentStep={this.props.currentStep}
            currentQuestion={this.props.currentQuestion}
            data={this.props.data}
            mode={this.props.mode}
            questions={this.props.questions}
            setData={this.props.setData} />

          <div className="question__source">{question.source}</div>
        </main>

        {this.props.mode !== 'interaction' || this.props.interactionData.length > 0
          ? <footer className="footer footer--chart">
            <a href="#" title={this.props.next} className="button--wide" onClick={() => this.props.toNextStep()}>
              {this.props.next}
            </a>
          </footer>
          : []
        }
      </section>
    );
  }
}