import { Component, Host, h, Event, Prop, State } from '@stencil/core';
import { GetSelectOptionId } from '../../../models/quiz.model';
export class SparkleQuizSelect {
  constructor() {
    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)))))));
  }
  static get is() { return "sparkle-quiz-select"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-quiz-select.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-quiz-select.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": ""
      }
    },
    "allowMultiple": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-multiple",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "values": {}
  }; }
  static get events() { return [{
      "method": "quizSelectChange",
      "name": "quizSelectChange",
      "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"
          }
        }
      }
    }]; }
}
