Vue.component("read-activity", {
  mixins: [mainMixin],
  props: [
    "show_read_answers",
    "lesson",
    "selected_level",
    "definitions",
    "words",
    "progress",
  ],
  methods: {
    redoActivity() {
      this.$emit("redo_activity", "read");
    },
    ngslAcknowledgement() {
      this.alert('info', 'Acknowledgement', 'Word frequency information is provided by the New General Service List.<hr><small class="text-muted">Browne, C., Culligan, B. & Phillips, J. (2013). The New General Service List. Retrieved from <a target="_blank" href="http://www.newgeneralservicelist.org.">http://www.newgeneralservicelist.org</a>.</snall>');
    },
    showWordsOfType(type) {
      var wordlist = this.getWordsOfType(type).map(function(e) {
        if (type !== "propn") {
          return {
            word: e.word.toLowerCase(),
          };
        } else {
          return {
            word: e.word,
          };
        }
      });
      wordlist.forEach(function(e) {
        e.count = wordlist.filter(function(e2) {
          return e2.word == e.word;
        }).length;
      });
      wordlist = wordlist.filter(function(value, index, array) {
        return (
          array
          .map(function(e) {
            return e.word;
          })
          .indexOf(value.word) === index
        );
      });
      wordlist.sort((a, b) => a.word.localeCompare(b.word));
      var title;
      if (["common", "uncommon", "academic", "other"].includes(type)) {
        title = this.ucfirst(type) + " words";
      } else if (type == "propn") {
        title = "Proper nouns";
      } else if (type == "number") {
        title = "Numbers";
      }
      if (wordlist.length > 0) {
        this.alert(
          "info",
          title,
          wordlist
          .map(function(e) {
            return e.word + " (x" + e.count + ")";
          })
          .join(", ")
        );
      }
    },
    checkRead() {
      this.$emit("check_read");
    },
    hasUnansweredRead() {
      return (
        this.lesson["read_" + this.selected_level].filter(function(item) {
          return item.selected === "";
        }).length > 0
      );
    },
    getWordsOfType(type) {
      if (type == "academic") {
        return this.lesson["words_" + this.selected_level].filter(function(e) {
          return e.nawl;
        });
      }
      if (type == "common") {
        return this.lesson["words_" + this.selected_level].filter(function(e) {
          return e.ngsl;
        });
      }
      if (type == "uncommon") {
        return this.lesson["words_" + this.selected_level].filter(function(e) {
          return (!e.nawl &&
            !e.ngsl && ["NOUN", "VERB", "ADJ", "ADV", "PHR"].includes(e.pos) &&
            !/[0-9]/.test(e.word)
          );
        });
      }
      if (type == "propn") {
        return this.lesson["words_" + this.selected_level].filter(function(e) {
          return e.pos == "PROPN";
        });
      }
      if (type == "number") {
        return this.lesson["words_" + this.selected_level].filter(function(e) {
          return ["NUM"].includes(e.pos) || /[0-9]/.test(e.word);
        });
      }
      if (type == "other") {
        return this.lesson["words_" + this.selected_level].filter(function(e) {
          return (![
              "NOUN",
              "VERB",
              "ADJ",
              "ADV",
              "PROPN",
              "PUNCT",
              "NUM",
              "PHR",
            ].includes(e.pos) &&
            !e.ngsl &&
            !e.nawl &&
            !/[0-9]/.test(e.word)
          );
        });
      }
    },
    itemWasChecked(idx) {
      return this.definitions.find(function(e) {
        return e.word_idx == idx;
      });
    },
    getClassForWord(item, idx) {
      var vm = this;
      return {
        "text-word": true,
        "ngsl-item": item.ngsl,
        "nawl-item": item.nawl,
        "propn-item": item.pos == "PROPN",
        "number-item": item.pos == "NUM" || /[0-9]/.test(item.word),
        "unknown-item":
          !item.ngsl &&
          !item.nawl &&
          !["PROPN", "NUM"].includes(item.pos) &&
          !/[0-9]/.test(item.word),
        "was-checked": vm.itemWasChecked(idx),
      };
    },
    isWord(item) {
      var itemIsWord = true;
      if (["PUNCT", "SPACE"].includes(item.pos)) {
        itemIsWord = false;
      }
      if (item.word.includes("'") && item.pos != "PHR") {
        itemIsWord = false;
      }
      return itemIsWord;
    },

    getWordInfo(item, idx) {
      var vm = this;
      if (!vm.eigoai_user) {
        vm.alert("info", "Information", "<a href='/account/?screen=sign_in'>Sign in</a> or <a href='/account/?screen=sign_up'>register</a> to look up words!");
      } else {
        this.$emit("get_word_info", item, idx);
      }
    },
  },
  template: `
    <div>

      <div v-if="show_read_answers">
        <read-answers :show_redo='true' @redo_activity="redoActivity()" :submitted="progress['read_'+selected_level+'_submitted']" :lesson='lesson' :level='selected_level' :data="lesson['read_'+selected_level]"></read-answers>
      </div>

      <div v-else>

        <div class='alert alert-info text-center'>
          Read the passage about <b>{{lesson.topic}}</b> and answer the comprehension questions
        </div>

        <img class="img-thumbnail float-start" style="margin-right:15px;width:200px;height:auto;" :src="'https://eigoai.sgp1.cdn.digitaloceanspaces.com/lesson_images/'+lesson.id+'.jpg'" :alt="lesson.topic">

        <div class="lead" style="line-height:1.8">
          <div :style='getStyleForWord(item,idx,selected_level)' v-for='(item,idx) in lesson["words_"+selected_level]'>
            <span v-if='isWord(item)' @click='getWordInfo(item,idx)' :class='getClassForWord(item,idx)'>
              {{item.word}}
            </span>
            <span v-else-if='["PUNCT","PART","AUX"].includes(item.pos)'>{{item.word}}</span>
          </div>
        </div>

        <hr/>

        <div class='lead'>
          Total Words: {{lesson["words_"+selected_level].filter(function(e){return e.pos!="PUNCT";}).length}}
        </div>

        <div>
          <small>
            <i style='cursor:pointer;' @click='ngslAcknowledgement()' class='bi bi-info-circle-fill'></i>
            <span @click='showWordsOfType("common")' class='ngsl-item'>Common Words:</span> {{getWordsOfType('common').length}} | 
            <span @click='showWordsOfType("academic")' class='nawl-item'>Academic Words:</span> {{getWordsOfType('academic').length}} | 
            <span @click='showWordsOfType("uncommon")' class='unknown-item'>Uncommon Words:</span> {{getWordsOfType('uncommon').length}} | 
            <span @click='showWordsOfType("propn")' class='propn-item'>Proper Nouns:</span> {{getWordsOfType('propn').length}} | 
            <span @click='showWordsOfType("number")' class='number-item'>Numbers:</span> {{getWordsOfType('number').length}} | 
            <span @click='showWordsOfType("other")' class='other-item'>Other:</span> {{getWordsOfType('other').length}}
          </small>
        </div>

        <div>
          <small>Word Look-ups Used: {{definitions.length}}/10</small>
        </div>

        <hr/>

        <div v-for="(item,idx) in lesson['read_'+selected_level]" class="mt-4 mb-4">
          <p class="fw-bold">{{idx+1}}. {{item.question}}</p>
          <div v-for="(choice,idx2) in item.choices" class="form-check">
            <input v-model="item.selected" class="form-check-input" type="radio" :name="'mc_question_'+idx" :id="'mc_question_'+idx+'_choice_'+idx2" :value="choice">
            <label class="form-check-label" :for="'mc_question_'+idx+'_choice_'+idx2">
              <span>{{choice}}</span>
            </label>
          </div>
        </div>

        <div class="d-grid gap-2 mt-3">
          <button :disabled="hasUnansweredRead()" v-if="!show_read_answers" @click="checkRead()" class="btn btn-success" type="button">
            Submit <i class="bi bi-check-circle-fill"></i>
          </button>
        </div>

      </div>
    </div>
  `,
});