import { r as registerInstance, i as createEvent, h, e as getElement } from './index-c04b9ed5.js';
import { A as AssetsService } from './assets.service-66e848b8.js';
import { E as EnvironmentConfigService } from './environment-config.service-2b5d692b.js';

const sparkleQuizV1Css = "sparkle-quiz-v1{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 SparkleQuizV1 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizAnswerChanged = createEvent(this, "quizAnswerChanged", 7);
  }
  async loadQuestion() {
    if (this.quizData) {
      this.question = this.quizData[+this.questionId];
    }
  }
  async componentWillLoad() {
  }
  async componentDidLoad() {
    const config = EnvironmentConfigService.getInstance().get('sparkle');
    this.quizData = await 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 => h("small", null, feedback));
    }
    else if (this.question.questionType == "FEEDBACK" || this.question.questionType == "TEXT") {
      return this.question.feedback && h("small", null, " ", this.question.feedback);
    }
  }
  showAnswerStatus() {
    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
  }
  renderQuestion() {
    if (this.question.questionType == "MULTIPLE-CHOICE") {
      return h("sparkle-quiz-select", { question: this.question, allowMultiple: true });
    }
    else if (this.question.questionType == "FEEDBACK") {
      return h("sparkle-quiz-feedback", { question: this.question });
    }
    else if (this.question.questionType == "TEXT") {
      return h("sparkle-quiz-input", { question: this.question });
    }
    else if (this.question.questionType == "OPINION") {
      return h("sparkle-quiz-opinion", { question: this.question });
    }
    else if (this.question.questionType == "POLL") {
      return h("sparkle-quiz-poll", { question: this.question });
    }
  }
  render() {
    if (this.question) {
      let classes = {
        'correct': this.submitted && this.correct,
        'incorrect': this.submitted && !this.correct
      };
      return h("div", { class: classes }, this.renderQuestion(), this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(),
        this.getQuestionFeedback()]));
    }
    else {
      return h("p", null, "No question found.");
    }
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "questionId": ["loadQuestion"]
  }; }
};
SparkleQuizV1.style = sparkleQuizV1Css;

export { SparkleQuizV1 as sparkle_quiz_v1 };
