import { r as registerInstance, i as createEvent, h, e as getElement } from './index-c04b9ed5.js';

const sparkleQuizOldCss = "sparkle-quiz-old{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 SparkleQuizOld = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizAnswerChanged = createEvent(this, "quizAnswerChanged", 7);
    this.type = 'TEXT';
    this.scale = 'FIVE-POINTS';
    this.options = [];
  }
  //   private pageInfo: any;
  //   @Watch('questionId')
  //   async loadQuestion() {
  //     if (this.quizData) {
  //       this.question = this.quizData[+this.questionId];
  //     }
  //   }
  //@State() question: SparkleQuizQuestion;
  //@State() quizData: { [key: string]: SparkleQuizQuestion };
  async componentWillLoad() { }
  async componentDidLoad() {
    this.options = [];
    if (this.el.querySelector("[slot='options']")) {
      Array.from(this.el.querySelector("[slot='options']").querySelectorAll('option')).forEach(el => {
        this.options = [...this.options, { option: el.innerText }];
      });
      console.log(this.questionText, this.options);
    }
    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.type == 'MULTIPLE-CHOICE') {
      //   const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
      //   return feedbacks.length > 0 && feedbacks.map(feedback => <small>{feedback}</small>);
      return h("small", null);
    }
    else if (this.type == 'FEEDBACK' || this.type == 'TEXT') {
      return this.feedback && h("small", null, " ", this.feedback);
    }
  }
  showAnswerStatus() {
    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
  }
  renderQuestion() {
    var question = {
      questionId: this.questionId,
      questionText: this.questionText,
      questionType: this.type,
      scale: this.scale,
      showOptionNumber: this.showOptionNumber,
      options: this.options,
      //options: Array<SparkleQuizQuestionOption>;
      feedback: this.feedback,
    };
    if (this.type == 'MULTIPLE-CHOICE') {
      return h("sparkle-quiz-select", { question: question, allowMultiple: true });
    }
    else if (this.type == 'FEEDBACK') {
      return h("sparkle-quiz-feedback", { question: question });
    }
    else if (this.type == 'TEXT') {
      return h("sparkle-quiz-input", { question: question });
    }
    else if (this.type == 'OPINION') {
      return h("sparkle-quiz-opinion", { question: question });
    }
    else if (this.type == 'POLL') {
      return h("sparkle-quiz-poll", { question: question });
    }
  }
  render() {
    if (this.questionText) {
      let classes = {
        correct: this.submitted && this.correct,
        incorrect: this.submitted && !this.correct,
      };
      return (h("div", { class: classes, ref: el => (this.containerRef = el) }, h("div", { hidden: true }, h("slot", null)), 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); }
};
SparkleQuizOld.style = sparkleQuizOldCss;

export { SparkleQuizOld as sparkle_quiz_old };
