import { Component, Host, Element, Prop, Event, State, h } from '@stencil/core';
import { GetSelectOptionId } from '../../../models/quiz.model';
export class SparkleQuizOpinion {
  constructor() {
    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()))));
  }
  static get is() { return "sparkle-quiz-opinion"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-quiz-opinion.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-quiz-opinion.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 states() { return {
    "selectedIndex": {}
  }; }
  static get events() { return [{
      "method": "quizOpinionChange",
      "name": "quizOpinionChange",
      "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"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
}
