'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-bae2a754.js');
const assets_service = require('./assets.service-0c759d51.js');
const environmentConfig_service = require('./environment-config.service-0e02b049.js');

const sparkleQuizCss = "sparkle-quiz{display:block;font-family:var(--font-family);--sparkle-quiz-question-container-padding:10px 0px;--sparkle-quiz-question-container-margin:0px;--sparkle-quiz-question-text-padding:10px 0px;--sparkle-quiz-option-border:2px solid var(--line-rule-color);--sparkle-quiz-selected-option-border:2px solid var(--text-color--dark);--sparkle-quiz-option-border-radius:4px;--sparkle-quiz-option-padding:5px 10px;--sparkle-quiz-option-width:100%;--sparkle-quiz-error-bg-color:#fbaeae;--sparkle-quiz-success-bg-color:#fbaeae;padding:var(--sparkle-quiz-question-container-padding);margin:var(--sparkle-quiz-question-container-margin)}.question-text{padding:var(--sparkle-quiz-question-text-padding)}.option{padding:5px 0px}.number{padding:0px 14px;border:1px solid #ebebeb;border-radius:4px;margin-right:10px;font-size:14px;width:14px;display:inline-flex;justify-content:center}.feedback-container{padding:10px;border-radius:4px}.incorrect .feedback-container{background-color:var(--sparkle-quiz-error-bg-color, #fbaeae)}.correct .feedback-container{background-color:var(--sparkle-quiz-success-bg-color, #fbaeae)}";

const SparkleQuiz = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.quizAnswerChanged = index.createEvent(this, "quizAnswerChanged", 7);
  }
  async loadQuestion() {
    if (this.quizData) {
      this.question = this.quizData[+this.questionId];
    }
  }
  async componentWillLoad() {
  }
  async componentDidLoad() {
    const config = environmentConfig_service.EnvironmentConfigService.getInstance().get('sparkle');
    this.quizData = await assets_service.AssetsService.getInstance().loadJsonFile(config.quizPath);
    await this.loadQuestion();
    this.quizAnswerChanged.emit({
      question: null,
      answer: "1"
    });
  }
  quizInputChangeHandler(event) {
    this.quizAnswerChanged.emit({
      question: event.detail.question,
      answer: event.detail.value
    });
  }
  quizFeedbackChangeHandler(event) {
    this.quizAnswerChanged.emit({
      question: event.detail.question,
      answer: event.detail.value
    });
  }
  quizSelectChangeHandler(event) {
    this.quizAnswerChanged.emit({
      question: event.detail.question,
      answer: event.detail.value
    });
  }
  quizOpinionChangeHandler(event) {
    this.quizAnswerChanged.emit({
      question: event.detail.question,
      answer: event.detail.value
    });
  }
  getQuestionFeedback() {
    if (this.question.questionType == "MULTIPLE-CHOICE") {
      const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
      return feedbacks.length > 0 && feedbacks.map(feedback => index.h("small", null, feedback));
    }
    else if (this.question.questionType == "FEEDBACK" || this.question.questionType == "TEXT") {
      return this.question.feedback && index.h("small", null, " ", this.question.feedback);
    }
  }
  showAnswerStatus() {
    return index.h("div", null, this.correct ? index.h("strong", null, "Good job!") : index.h("strong", null, "Incorrect answer, please try again."));
  }
  renderQuestion() {
    if (this.question.questionType == "MULTIPLE-CHOICE") {
      return index.h("sparkle-quiz-select", { question: this.question, allowMultiple: true });
    }
    else if (this.question.questionType == "FEEDBACK") {
      return index.h("sparkle-quiz-feedback", { question: this.question });
    }
    else if (this.question.questionType == "TEXT") {
      return index.h("sparkle-quiz-input", { question: this.question });
    }
    else if (this.question.questionType == "OPINION") {
      return index.h("sparkle-quiz-opinion", { question: this.question });
    }
    else if (this.question.questionType == "POLL") {
      return index.h("sparkle-quiz-poll", { question: this.question });
    }
  }
  render() {
    if (this.question) {
      let classes = {
        'correct': this.submitted && this.correct,
        'incorrect': this.submitted && !this.correct
      };
      return index.h("div", { class: classes }, this.renderQuestion(), this.submitted && this.showInstantResult && index.h("div", { class: "feedback-container" }, [this.showAnswerStatus(),
        this.getQuestionFeedback()]));
    }
    else {
      return index.h("p", null, "No question found.");
    }
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "questionId": ["loadQuestion"]
  }; }
};
SparkleQuiz.style = sparkleQuizCss;

exports.sparkle_quiz = SparkleQuiz;
