import { Component, Prop, Listen, State, Event, Element, h } from '@stencil/core';
export class SparkleQuizOld {
  constructor() {
    this.type = 'TEXT';
    this.scale = 'FIVE-POINTS';
    this.options = [];
  }
  //   private pageInfo: any;
  //   @Watch('questionId')
  //   async loadQuestion() {
  //     if (this.quizData) {
  //       this.question = this.quizData[+this.questionId];
  //     }
  //   }
  //@State() question: SparkleQuizQuestion;
  //@State() quizData: { [key: string]: SparkleQuizQuestion };
  async componentWillLoad() { }
  async componentDidLoad() {
    this.options = [];
    if (this.el.querySelector("[slot='options']")) {
      Array.from(this.el.querySelector("[slot='options']").querySelectorAll('option')).forEach(el => {
        this.options = [...this.options, { option: el.innerText }];
      });
      console.log(this.questionText, this.options);
    }
    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.type == 'MULTIPLE-CHOICE') {
      //   const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
      //   return feedbacks.length > 0 && feedbacks.map(feedback => <small>{feedback}</small>);
      return h("small", null);
    }
    else if (this.type == 'FEEDBACK' || this.type == 'TEXT') {
      return this.feedback && h("small", null,
        " ",
        this.feedback);
    }
  }
  showAnswerStatus() {
    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
  }
  renderQuestion() {
    var question = {
      questionId: this.questionId,
      questionText: this.questionText,
      questionType: this.type,
      scale: this.scale,
      showOptionNumber: this.showOptionNumber,
      options: this.options,
      //options: Array<SparkleQuizQuestionOption>;
      feedback: this.feedback,
    };
    if (this.type == 'MULTIPLE-CHOICE') {
      return h("sparkle-quiz-select", { question: question, allowMultiple: true });
    }
    else if (this.type == 'FEEDBACK') {
      return h("sparkle-quiz-feedback", { question: question });
    }
    else if (this.type == 'TEXT') {
      return h("sparkle-quiz-input", { question: question });
    }
    else if (this.type == 'OPINION') {
      return h("sparkle-quiz-opinion", { question: question });
    }
    else if (this.type == 'POLL') {
      return h("sparkle-quiz-poll", { question: question });
    }
  }
  render() {
    if (this.questionText) {
      let classes = {
        correct: this.submitted && this.correct,
        incorrect: this.submitted && !this.correct,
      };
      return (h("div", { class: classes, ref: el => (this.containerRef = el) },
        h("div", { hidden: true },
          h("slot", null)),
        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-old"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-quiz-old.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-quiz-old.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
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'MULTIPLE-CHOICE' | 'TEXT' | 'FEEDBACK' | 'OPINION' | 'POLL'",
        "resolved": "\"FEEDBACK\" | \"MULTIPLE-CHOICE\" | \"OPINION\" | \"POLL\" | \"TEXT\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'TEXT'"
    },
    "scale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'FIVE-POINTS' | 'TEN-POINTS'",
        "resolved": "\"FIVE-POINTS\" | \"TEN-POINTS\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scale",
      "reflect": false,
      "defaultValue": "'FIVE-POINTS'"
    },
    "questionText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "question-text",
      "reflect": false
    },
    "showOptionNumber": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-option-number",
      "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
    },
    "feedback": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "feedback",
      "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 {
    "options": {}
  }; }
  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 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
    }]; }
}
