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

function GetSelectOptionId(questionId, index) {
  return "question-" + questionId + "-option-" + index;
}

const sparkleQuizFeedbackCss = ":host{display:block}";

const SparkleQuizFeedback = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizFeedbackChange = createEvent(this, "quizFeedbackChange", 7);
    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)))))));
  }
};
SparkleQuizFeedback.style = sparkleQuizFeedbackCss;

const sparkleQuizInputCss = ":host{display:block}";

const SparkleQuizInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizInputChange = createEvent(this, "quizInputChange", 7);
  }
  render() {
    return (h(Host, { class: "quiz__input" }, h("div", { class: "question-container" }, h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
  }
};
SparkleQuizInput.style = sparkleQuizInputCss;

const sparkleQuizOpinionCss = "sparkle-quiz-opinion .scale{display:flex;justify-content:space-between}sparkle-quiz-opinion .scale>p{margin:0}sparkle-quiz-opinion .scale>p.selected{color:var(--ion-color-primary)}sparkle-quiz-opinion ion-icon{font-size:30px}sparkle-quiz-opinion .icon-group{min-width:70px;text-align:right;padding-right:10px}";

const SparkleQuizOpinion = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizOpinionChange = createEvent(this, "quizOpinionChange", 7);
    this.fivePointsDisplayOptions = ['Strongly agree', 'Agree', 'Not sure', 'Disagree', 'Strongly disagree'];
    this.tenPointsDisplayOptions = ["Never",
      "Never",
      "Sometimes",
      "Sometimes",
      "Half of the time",
      "Half of the time",
      "Most of the time",
      "Most of the time",
      "Always",
      "Always",
      "Always"];
    this.tenPointsDefaultValue = 5;
  }
  optionChanged(index, answer) {
    this.selectedIndex = index;
    this.quizOpinionChange.emit({ value: answer, question: this.question });
  }
  renderFivePointScale() {
    return (this.fivePointsDisplayOptions.map((option, index) => h("div", { class: "option" }, h("input", { id: GetSelectOptionId(this.question.questionId, index), type: "radio", name: "question-" + this.question.questionId, value: option, onChange: (e) => this.optionChanged(index, this.fivePointsDisplayOptions[index]) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, index + 1), option), h("br", null))));
  }
  renderTenPointScale() {
    return (h("div", null, h("ion-item", null, h("ion-range", { class: "opinion-range", onIonChange: (e) => this.optionChanged(+e.detail.value, this.tenPointsDisplayOptions[+e.detail.value]), min: 0, max: 10, value: this.tenPointsDefaultValue, step: 1, pin: true, snaps: true }, h("ion-icon", { size: "small", slot: "start", name: "star-outline" }), h("ion-icon", { slot: "end", name: "star" }))), h("div", { class: "scale" }, h("p", null, "Never"), h("p", { class: "selected" }, this.tenPointsDisplayOptions[this.selectedIndex] || this.tenPointsDisplayOptions[this.tenPointsDefaultValue]), h("p", null, "Always")), h("br", null), h("hr", null)));
  }
  render() {
    return (h(Host, { class: "quiz__opinion" }, h("div", { class: "opinion-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.question.scale == "FIVE-POINTS" && this.renderFivePointScale(), this.question.scale == "TEN-POINTS" && this.renderTenPointScale()))));
  }
  get el() { return getElement(this); }
};
SparkleQuizOpinion.style = sparkleQuizOpinionCss;

const sparkleQuizPollCss = ":host{display:block}";

const SparkleQuizPoll = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizInputChange = createEvent(this, "quizInputChange", 7);
  }
  render() {
    return (h(Host, { class: "quiz__input" }, h("div", { class: "question-container" }, h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
  }
};
SparkleQuizPoll.style = sparkleQuizPollCss;

const sparkleQuizSelectCss = ":host{display:block}";

const SparkleQuizSelect = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.quizSelectChange = createEvent(this, "quizSelectChange", 7);
    this.allowMultiple = false;
    this.values = [];
    this.displayOptions = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  }
  optionChanged(e) {
    if (e.target.checked) {
      this.values = [...this.values, e.target.value];
    }
    else {
      this.values = this.values.filter(x => x !== e.target.value);
    }
    this.quizSelectChange.emit({ value: this.values, question: this.question });
  }
  render() {
    return (h(Host, { class: "quiz__select" }, h("div", { class: "question-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.question.options.map((option, index) => h("div", { class: "option" }, h("input", { type: this.allowMultiple ? "checkbox" : "radio", id: GetSelectOptionId(this.question.questionId, index), name: "question-" + this.question.questionId, value: option.option, onChange: (e) => this.optionChanged(e) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, this.displayOptions[index]), option.option), h("br", null)))))));
  }
};
SparkleQuizSelect.style = sparkleQuizSelectCss;

export { SparkleQuizFeedback as sparkle_quiz_feedback, SparkleQuizInput as sparkle_quiz_input, SparkleQuizOpinion as sparkle_quiz_opinion, SparkleQuizPoll as sparkle_quiz_poll, SparkleQuizSelect as sparkle_quiz_select };
