import { Component, Prop, Watch, Listen, State, Event, Element, h } from '@stencil/core';
import { AssetsService } from '../../services/core/assets.service';
import { EnvironmentConfigService } from '../../services/environment/environment-config.service';
export class SparkleQuiz {
  async loadQuestion() {
    if (this.quizData) {
      this.question = this.quizData[+this.questionId];
    }
  }
  async componentWillLoad() { }
  async componentDidLoad() {
    const config = EnvironmentConfigService.getInstance().get('sparkle');
    this.quizData = await AssetsService.getInstance().loadJsonFile(config.quizPath);
    await this.loadQuestion();
    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.question.questionType == 'MULTIPLE-CHOICE') {
      const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
      return feedbacks.length > 0 && feedbacks.map(feedback => h("small", null, feedback));
    }
    else if (this.question.questionType == 'FEEDBACK' || this.question.questionType == 'TEXT') {
      return this.question.feedback && h("small", null,
        " ",
        this.question.feedback);
    }
  }
  showAnswerStatus() {
    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
  }
  renderQuestion() {
    if (this.question.questionType == 'MULTIPLE-CHOICE') {
      return h("sparkle-quiz-select", { question: this.question, allowMultiple: true });
    }
    else if (this.question.questionType == 'FEEDBACK') {
      return h("sparkle-quiz-feedback", { question: this.question });
    }
    else if (this.question.questionType == 'TEXT') {
      return h("sparkle-quiz-input", { question: this.question });
    }
    else if (this.question.questionType == 'OPINION') {
      return h("sparkle-quiz-opinion", { question: this.question });
    }
    else if (this.question.questionType == 'POLL') {
      return h("sparkle-quiz-poll", { question: this.question });
    }
  }
  render() {
    if (this.question) {
      let classes = {
        correct: this.submitted && this.correct,
        incorrect: this.submitted && !this.correct,
      };
      return (h("div", { class: classes },
        this.renderQuestion(),
        this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
    }
    else {
      return h("p", null, "No question found.");
    }
  }
  static get is() { return "sparkle-quiz"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-quiz.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-quiz.css"]
  }; }
  static get properties() { return {
    "questionId": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "question-id",
      "reflect": false
    },
    "submitted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "submitted",
      "reflect": false
    },
    "correct": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "correct",
      "reflect": false
    },
    "showInstantResult": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-instant-result",
      "reflect": false
    }
  }; }
  static get states() { return {
    "question": {},
    "quizData": {}
  }; }
  static get events() { return [{
      "method": "quizAnswerChanged",
      "name": "quizAnswerChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ answer: any; question: SparkleQuizQuestion }",
        "resolved": "{ answer: any; question: SparkleQuizQuestion; }",
        "references": {
          "SparkleQuizQuestion": {
            "location": "import",
            "path": "../../models/quiz.model"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "questionId",
      "methodName": "loadQuestion"
    }]; }
  static get listeners() { return [{
      "name": "quizInputChange",
      "method": "quizInputChangeHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "quizFeedbackChange",
      "method": "quizFeedbackChangeHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "quizSelectChange",
      "method": "quizSelectChangeHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "quizOpinionChange",
      "method": "quizOpinionChangeHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
