import { Component, Host, Event, Prop, h } from '@stencil/core';
import { GetSelectOptionId } from '../../../models/quiz.model';
export class SparkleQuizFeedback {
  constructor() {
    this.displayOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  }
  render() {
    return (h(Host, { class: "quiz__feedback" },
      h("div", { class: "question-container" },
        h("div", { class: "question-text" }, this.question.questionText),
        h("div", null, this.displayOptions.map((option, index) => h("div", { class: "option" },
          h("input", { type: "radio", id: GetSelectOptionId(this.question.questionId, index), name: "question-" + this.question.questionId, value: option, onChange: (e) => this.quizFeedbackChange.emit({ value: e.target.value, question: this.question }) }),
          h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) },
            h("span", { class: "number" }, this.displayOptions[index]),
            " ",
            option),
          h("br", null)))))));
  }
  static get is() { return "sparkle-quiz-feedback"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-quiz-feedback.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-quiz-feedback.css"]
  }; }
  static get properties() { return {
    "question": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SparkleQuizQuestion",
        "resolved": "SparkleQuizQuestion",
        "references": {
          "SparkleQuizQuestion": {
            "location": "import",
            "path": "../../../models/quiz.model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get events() { return [{
      "method": "quizFeedbackChange",
      "name": "quizFeedbackChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ value: any, question: SparkleQuizQuestion }",
        "resolved": "{ value: any; question: SparkleQuizQuestion; }",
        "references": {
          "SparkleQuizQuestion": {
            "location": "import",
            "path": "../../../models/quiz.model"
          }
        }
      }
    }]; }
}
