import { Component, Element, State, Prop, h } from '@stencil/core';
import { SignalRService } from '../../../services/signalR.service';
export class SparkleDiscussionQuestions {
  constructor() {
    this.allowPostToFeed = false;
    this.feedStartingText = 'My suggestions are:';
    this.isTeacherMode = false;
    this.questions = [];
    this.error = '';
    this.modelChange = '';
    this.responses = [];
    this.tempResponses = [];
    this.suggestionList = [];
    this.postToFeedTextValue = '';
  }
  componentDidLoad() { }
  resetPollData() {
    SignalRService.getInstance().callSignalR('ResetPollData', {});
  }
  selectOption(evt, question, option) {
    evt.target.parentElement.childNodes.forEach(e => e.classList.remove('selected'));
    evt.target.classList.add('selected');
    //console.log(question, option);
    SignalRService.getInstance().callSignalR('PollSubmission', {
      questionId: question.questionId,
      question: question.questionText,
      answer: option.option,
      responseType: question.questionType,
      pageUrl: window.location.href,
    });
  }
  addSuggestion(evt, question) {
    var inputVal = evt.target.parentElement.parentElement.querySelector('input[type=text]');
    if (inputVal.value == '' || !inputVal.value) {
      this.error = 'Please enter the value';
    }
    else {
      SignalRService.getInstance().callSignalR('PollSubmission', {
        questionId: question.questionId,
        question: question.questionText,
        answer: inputVal.value,
        responseType: question.questionType,
        pageUrl: window.location.href,
      });
      //   this.dataSvc.callSignalR(
      //     {
      //       questionId: question.questionId,
      //       question: question.question,
      //       answer: inputVal.value,
      //       responseType: question.responseType,
      //     },
      //     'PollSubmission',
      //     true,
      //   );
      //&& question.updateFeedText
      if (this.allowPostToFeed) {
        this.suggestionList.push({ questionId: question.questionId, question: question.questionText, answer: inputVal.value, responseType: question.questionType });
        let value = this.suggestionList
          .map(x => x.answer)
          .join(', ')
          .toString();
        this.postToFeedTextValue = this.feedStartingText + ' ' + value;
      }
    }
  }
  // async presentToast(message: string) {
  //     const toast = await this.toastCtrl.create({
  //         message: message,
  //         duration: 2000
  //     });
  //     await toast.present();
  // }
  toggleMode() {
    this.isTeacherMode = !this.isTeacherMode;
  }
  renderOptions(question) {
    if (question.questionType == 'MULTIPLE-CHOICE') {
      return (h("ul", null, question.options.map(opt => (h("li", { onClick: evt => this.selectOption(evt, question, opt) }, opt.option)))));
    }
    else if (question.questionType == 'FEEDBACK') {
      let options = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      return (h("ion-item", null,
        h("ion-label", null,
          "Choose Option ",
          h("ion-icon", { name: "arrow-back", mode: "ios" })),
        h("ion-select", { id: "customAlertSelect", interface: "alert" },
          h("ion-select-option", { value: "bacon" }, "Bacon"),
          h("ion-select-option", { value: "olives" }, "Black Olives"),
          h("ion-select-option", { value: "xcheese" }, "Extra Cheese"),
          h("ion-select-option", { value: "peppers" }, "Green Peppers"),
          h("ion-select-option", { value: "mushrooms" }, "Mushrooms"),
          h("ion-select-option", { value: "onions" }, "Onions"),
          h("ion-select-option", { value: "pepperoni" }, "Pepperoni"),
          h("ion-select-option", { value: "pineapple" }, "Pineapple"),
          h("ion-select-option", { value: "sausage" }, "Sausage"),
          h("ion-select-option", { value: "Spinach" }, "Spinach"))));
    }
    else {
      return (h("div", null,
        h("input", { slot: "start", type: "text", placeholder: "Type suggestion" }),
        h("div", null, this.error),
        h("ion-item", null,
          h("ion-button", { class: "suggetion-btn", size: "default", slot: "end", color: "primary", onClick: evt => this.addSuggestion(evt, question) }, "ADD SUGGESTION"))));
    }
  }
  renderQuestions() {
    return [
      this.questions.map(q => (h("div", { class: 'question' },
        h("h3", null,
          q.questionText,
          ' ',
          h("span", { class: "toggle-mode", onClick: () => this.toggleMode() }, ".")),
        this.renderOptions(q)))),
      this.allowPostToFeed ? h("sparkle-feed-post", { assignmentName: this.postToFeedAssignmentName, textValue: this.postToFeedTextValue }) : '',
    ];
  }
  render() {
    return this.renderQuestions();
  }
  static get is() { return "sparkle-discussion-questions"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-discussion-questions.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-discussion-questions.css"]
  }; }
  static get properties() { return {
    "allowPostToFeed": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-post-to-feed",
      "reflect": false,
      "defaultValue": "false"
    },
    "postToFeedAssignmentName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "post-to-feed-assignment-name",
      "reflect": false
    },
    "feedStartingText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "feed-starting-text",
      "reflect": false,
      "defaultValue": "'My suggestions are:'"
    },
    "isTeacherMode": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-teacher-mode",
      "reflect": false,
      "defaultValue": "false"
    },
    "questions": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Array<SparkleQuizQuestion>",
        "resolved": "SparkleQuizQuestion[]",
        "references": {
          "Array": {
            "location": "global"
          },
          "SparkleQuizQuestion": {
            "location": "import",
            "path": "../../../models/quiz.model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    }
  }; }
  static get states() { return {
    "error": {},
    "modelChange": {},
    "responses": {},
    "suggestionList": {},
    "postToFeedTextValue": {}
  }; }
  static get elementRef() { return "el"; }
}
