<template>
  <v-row class="text-view fill-width mr-0">

    <v-col cols="12" class="text-content pa-0">
      <!-- <v-col id="selected-title" class="label-text pa-0 pl-2"> Selected: 
        <span id="selected-class-name">{{selected_node.curr_full_name}} </span>
        </v-col> -->
      <v-row style="margin-left: 1px; align-items: center;">
          <v-col class="label-text pa-0 pl-2" id="wordcloud-name"> 
            <span style="margin-top: 5px">
              Word cloud:
            </span> 
              <svg version="1.1" width="35px" height="35px" 
            style="enable-background:new 0 0 512 512; opacity: 0;" 
            xml:space="preserve"
              class="loading-wordcloud-svg">
              <symbol id="animate-wordcloud-icon" viewBox="0 0 60 60">
                <g transform="translate(30,30)">
                  <path class="circle-path"
                    d="M1.2246467991473533e-15,-20A20,20,0,1,1,-20,2.4492935982947065e-15L-16,1.959434878635765e-15A16,16,0,1,0,9.797174393178826e-16,-16Z">
                  </path>
                </g>
            
              </symbol>
              <use xlink:href="#animate-wordcloud-icon" x="0" y="0" width="40px" height="40px"></use>
            </svg>
          </v-col>
          <svg :style="'opacity:' + (focus_word===null?0:1)+';'" v-on:click="remove_word()" class="wordcloud-recyclebin" height="20" viewBox="0 0 74 74" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m51.512 71.833h-28.723a4.661 4.661 0 0 1 -4.631-4.3l-2.858-39.146a1 1 0 1 1 1.995-.146l2.854 39.142a2.652 2.652 0 0 0 2.636 2.45h28.727a2.651 2.651 0 0 0 2.635-2.45l2.853-39.142a1 1 0 0 1 2 .146l-2.857 39.142a4.661 4.661 0 0 1 -4.631 4.304z"/><path d="m58.741 29.314h-43.184a3.072 3.072 0 0 1 -3.069-3.068v-4.468a3.072 3.072 0 0 1 3.069-3.068h43.184a3.071 3.071 0 0 1 3.068 3.068v4.468a3.071 3.071 0 0 1 -3.068 3.068zm-43.184-8.6a1.07 1.07 0 0 0 -1.069 1.068v4.468a1.071 1.071 0 0 0 1.069 1.068h43.184a1.07 1.07 0 0 0 1.068-1.068v-4.472a1.069 1.069 0 0 0 -1.068-1.068z"/><path d="m58 20.71h-41.7a1 1 0 0 1 -.944-1.329l5.035-14.464a4.6 4.6 0 0 1 4.338-3.084h24.839a4.6 4.6 0 0 1 4.339 3.084l5.034 14.464a1 1 0 0 1 -.941 1.329zm-40.289-2h38.879l-4.572-13.136a2.6 2.6 0 0 0 -2.45-1.741h-24.839a2.6 2.6 0 0 0 -2.449 1.741z"/><path d="m51.5 20.71h-28.7a1 1 0 0 1 -.944-1.329l3.314-9.515a2.294 2.294 0 0 1 2.165-1.538h19.627a2.293 2.293 0 0 1 2.165 1.538l3.312 9.515a1 1 0 0 1 -.939 1.329zm-27.285-2h25.873l-2.85-8.187a.292.292 0 0 0 -.276-.2h-19.627a.292.292 0 0 0 -.276.2z"/><path d="m27.345 52.7a1 1 0 0 1 -.977-.79 11.029 11.029 0 0 1 18.814-9.887 1 1 0 1 1 -1.457 1.37 8.943 8.943 0 0 0 -6.576-2.842 9.038 9.038 0 0 0 -9.028 9.028 9.133 9.133 0 0 0 .2 1.911 1 1 0 0 1 -.767 1.187.953.953 0 0 1 -.209.023z"/><path d="m37.149 60.6a11.072 11.072 0 0 1 -8.033-3.473 1 1 0 1 1 1.457-1.37 8.944 8.944 0 0 0 6.576 2.843 9.038 9.038 0 0 0 9.028-9.028 9.157 9.157 0 0 0 -.119-1.47 1 1 0 0 1 1.974-.321 11.19 11.19 0 0 1 .145 1.791 11.042 11.042 0 0 1 -11.028 11.028z"/><path d="m40.083 44.563a1 1 0 0 1 -.192-1.98l3.388-.668-.667-3.388a1 1 0 0 1 1.962-.387l.861 4.369a1 1 0 0 1 -.788 1.175l-4.37.86a.918.918 0 0 1 -.194.019z"/><path d="m30.7 61.814a1 1 0 0 1 -.98-.807l-.861-4.369a1 1 0 0 1 .787-1.175l4.37-.86a1 1 0 1 1 .387 1.961l-3.389.668.668 3.389a1 1 0 0 1 -.782 1.179.989.989 0 0 1 -.2.014z"/></svg>
      </v-row>

      <v-col class="wordcloud-col pa-0"> </v-col>
      <v-col class="label-text pa-0 pl-2" id="caption-name"> Captions: </v-col>
      <v-col class="text-col pa-0">
        <template>
          <DynamicScroller :items="text_list" 
          :min-item-size="54"
          class="scroller text-col-scroller" style="overflow-y: auto;">
            <template v-slot="{ item, index, active }">
              <DynamicScrollerItem
                :item="item"
                :active="active"
                :size-dependencies="[item.message,]"
                :data-index="index"
              >
                <div class="label-div" :id="item.id">
                  <svg :width="30+label.length*8.1" height="32" v-for="label in item.c" :key="label" style="margin: 3px; margin-top: 10px">
                    <rect class="background" rx="3.3333333333333335" ry="3.3333333333333335" x="0" y="0" height="32" :width="30+label.length*8.1" style="fill: rgb(235, 235, 243); fill-opacity: 1;"></rect>
                    <text class="node-name" text-anchor="start" x="15" y="16" font-size="18px" dy=".3em" style="opacity: 1;">{{ label }}</text>
                  </svg>
                </div>
              <div
                class="text-div" 
                :id="item.id"
                :style="{ 'background' : item.id == current_selected_id ? '#ddd' : '#fff'}"
                @click="onTextItemClick(item.id)"
              >
                <span v-for="(text, index) in item.message.split(' ')" :key="`${item.id}_${index}`"
                  :style="{ 'text-decoration' : focus_word && text == focus_word.text ? 'underline' : 'none' }"
                >
                  {{ text }}
                </span>
              </div>
              </DynamicScrollerItem>
            </template>
          </DynamicScroller>
        </template>
      </v-col>
    </v-col>
  </v-row>
</template>


<script>
import { mapState, mapActions, mapMutations } from "vuex";
import * as d3 from "d3";
import * as Global from "../plugins/global";
import { wordcloud } from "../plugins/wordcloud.js";
//import TextItem from "../components/text_item"
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
// import Text_item from './text_item.vue';

export default {
  name: "CapText",
  data: () => ({
    current_selected_id: null,
    clean_flag: false
  }),
  components: {
    ///"text-item": TextItem,
    DynamicScroller: DynamicScroller,
    DynamicScrollerItem: DynamicScrollerItem
  },
  computed: {
    ...mapState(["selected_node", "words", "focus_word", "text_list"])
  },
  watch: {
    words() {
      d3.select(".loading-wordcloud-svg")
          .transition()
          .duration(1)
          .style("opacity", 0);
      Global.enable_global_interaction();
      console.log("triger words", this.focus_node);
      this.update_data();
      this.update_view();
    },
    focus_word() {
      console.log("triger focus word");
      this.$store.dispatch("fetch_text_by_word_and_cat_ids", {
        "text": this.focus_word.text,
        "cat_id": this.selected_node["node_ids"],
        "rules": this.$store.state.word_cloud_recycled
      });
    },
    text_list() {
      console.log("triger text list", this.text_list);
      // this.update_data();
      // this.update_view();
      this.adapt_wordcloud_height();
    },
  },
  methods: {
    ...mapActions(["fetch_text_by_word_and_cat_ids", 
      "fetch_single_image_detection_for_focus_text",
      "fetch_text_by_ids"]),
    ...mapMutations(["set_focus_word", "set_text_list", "set_words"]),
    onTextItemClick(id) {
      console.log("onTextItemClick", id);
      this.current_selected_id = id;
      this.fetch_single_image_detection_for_focus_text({
        image_id: id,
      });
    },
    clean(){
      this.clean_flag = true;
      this.set_text_list([]);
      this.set_words([]);
      d3.selectAll(".wordcloud-col").attr("style", null);

      this.wordcloud_svg
        .attr("height", this.fix_height);
    },
    update_data() {
      let words = Global.deepCopy(this.words);
      let removed_words = this.$store.state.word_cloud_recycled[this.selected_node.curr_full_name];
      if(removed_words!==undefined) {
        for(let word of removed_words) {
          let idx = words.findIndex(d => d.text===word);
          if(idx !== -1) words.splice(idx, 1);
        }
      }
      this.min_value = Math.min(...words.map((d) => d.value));
      this.max_value = Math.max(...words.map((d) => d.value));
      
      this.sizeScale = d3.scaleSqrt([this.min_value, this.max_value], 
        [0.0275 * this.wordcloud_width, 0.124 * this.wordcloud_width]);
      this.wordclouds = wordcloud()
        .size([this.wordcloud_width, this.wordcloud_height])
        .data(words)
        .padding(4)
        .font(this.fontFamily)
        .fontSize((d) => this.sizeScale(d.value))
        .start();
      // this.wordclouds.then(d => this.wordclouds = d);
    },
    update_view() {
      this.wordcloud_group
        .selectAll(".wordcloud")
        .transition()
        .duration(this.remove_ani)
        // .style("opacity", 0)
        .remove();
      this.e_words = this.wordcloud_group
        .selectAll(".wordcloud")
        .data(this.wordclouds, d=> d.text);
      // this.e_texts = this.text_group.selectAll("cap-text")
      //   .data(this.wordclouds); // for debug
      this.create();
      this.update();
      this.remove();
      this.adapt_wordcloud_height();
    },
    remove_word() {
        let that = this;
        let node = that.selected_node.curr_full_name;
        let removed_word = that.focus_word.text;
        console.log("click removed word", node, removed_word);
        if(that.$store.state.word_cloud_recycled[node]===undefined) {
          that.$store.state.word_cloud_recycled[node] = []
        }
        that.$store.state.word_cloud_recycled[node].push(removed_word);
        that.set_focus_word({text:that.focus_word.text});
        // re render
      that.update_data();
      that.update_view();
    },
    adapt_wordcloud_height() {
      if (this.clean_flag) {this.clean_flag=false; return;} 
      console.log("adapt_wordcloud_height");
      let bbox = this.wordcloud_group.node().getBBox();
      this.wordcloud_group
        .transition()
        .duration(this.update_ani)
        .attr('transform', `translate(${this.wordcloud_left_margin}, ${-bbox.y})`);
      this.wordcloud_svg
        .transition()
        .duration(this.update_ani)
        .attr('height', bbox.height);
      d3.selectAll('.wordcloud-col')
        .transition()
        .duration(this.update_ani)
        .style('height', `${bbox.height}px`);
      d3.selectAll('.text-col')
        .transition()
        .duration(this.update_ani)
        .style('height', `calc(100% - 180px)`);
      bbox = this.text_container.node().getBoundingClientRect();
      d3.selectAll('.text-col-scroller')
        .transition()
        .duration(this.update_ani)
        // .style('height', `${bbox.height}px`);
        .style('height', `380px`);
      // setTimeout(() => {
      //   // console.log("top", this.wordcloud_group.node().getBoundingClientRect().top, 
      //   //   this.wordcloud_group.node().getBoundingClientRect().height);
      //   d3.selectAll(".loading-wordcloud-svg")
      //     .style("top", (this.wordcloud_group.node().getBoundingClientRect().top + 
      //       this.wordcloud_group.node().getBoundingClientRect().height / 2) + "px");
      // }, that.create_ani + that.update_ani + that.remove_ani);
    },

    create() {
      this.wordcloud_create();
      this.text_create();
    },
    wordcloud_create() {
      let word_groups = this.e_words
        .enter()
        .append("g")
        .attr("class", "wordcloud")
        .attr("id", (d) => "id-" + d.text)
        .attr("transform", (d) => "translate(" + d.x + ", " + d.y + ")")
        .on("click", (ev, d) => {
          console.log("click word", ev, d);
          d3.selectAll(".wordcloud").style("text-decoration", "none");
          d3.select("#id-" + d.text).style("text-decoration", "underline");
          console.log("set focus word", d);
          this.set_focus_word(d);
        });
      word_groups
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("dx", (d) => d.dx)
        .attr("dy", (d) => d.dy)
        .attr("font-size", (d) => d.size)
        .style("font-family", (d) => d.font)
        .text((d) => d.text);
      word_groups
        .attr("opacity", 1)
        .transition()
        .duration(this.create_ani)
        .delay(this.remove_ani + this.update_ani)
        .attr("opacity", 1);

    },
    text_create() {},
    update() {
      this.wordcloud_update();
      this.text_update();
    },
    wordcloud_update() {
      this.e_words
        .transition()
        .duration(this.update_ani)
        .delay(this.remove_ani)
        .attr("transform", (d) => "translate(" + d.x + ", " + d.y + ")");
      this.e_words
        .select("text")
        .transition()
        .duration(this.update_ani)
        .delay(this.remove_ani)
        .attr("dx", (d) => d.dx)
        .attr("dy", (d) => d.dy)
        .attr("font-size", (d) => d.size)
        .style("font-family", (d) => d.font)
        // .style("text-decoration", d => {
        //   console.log(this.focus_word, d.text, d.text === this.focus_word.text)
        //   return (this.focus_word) && d.text === this.focus_word.text ? 
        //   "underline": "none"
        // })
        .text((d) => d.text);
    },
    text_update() {},
    remove() {
      this.wordcloud_remove();
      this.text_remove();
    },
    wordcloud_remove() {
      // console.log("wordcloud remove");
      // this.wordcloud_group
      //   .selectAll(".wordcloud")
      //   .transition()
      //   .duration(this.remove_ani)
      //   .style("opacity", 0)
      //   .remove();
    },
    text_remove() {},
  },
  async mounted() {
    window.text = this;
    let wordcloud_container = d3.select(".wordcloud-col");
    let text_container = d3.select(".text-col");
    this.text_container = text_container;
    // console.log("container", container);
    // let bbox = container.node().getBoundingClientRect();
    // this.bbox_width = bbox.width;
    // this.bbox_height = bbox.height;
    // this.layout_width = this.bbox_width;
    // this.layout_height = this.bbox_height * 0.98;
    this.create_ani = Global.Animation / 4;
    this.update_ani = Global.Animation / 4;
    this.remove_ani = Global.Animation / 4;

    // wordcloud
    this.wordcloud_height = wordcloud_container
      .node()
      .getBoundingClientRect().height;
    this.wordcloud_box_width = wordcloud_container
      .node()
      .getBoundingClientRect().width;
    this.wordcloud_width = this.wordcloud_box_width * 0.8;
    this.wordcloud_left_margin = this.wordcloud_box_width * 0.1;
    this.fontFamily = "Arial";

    // text
    this.text_height = text_container.node().getBoundingClientRect().height;
    this.text_width = text_container.node().getBoundingClientRect().width;

    this.fix_height = this.wordcloud_height;

    // this.svg = container
    //   .append("svg")
    //   .attr("id", "text-svg")
    //   .attr("width", this.bbox_width)
    //   .attr("height", this.layout_height);
    this.wordcloud_svg = d3
      .select(".wordcloud-col")
      .append("svg")
      .attr("width", this.wordcloud_box_width)
      .attr("height", 60.25);
    this.wordcloud_group = this.wordcloud_svg.append("g")
      .attr("id", "wordcloud-group")
      .attr("transform", "translate(" + 0 + ", " + 0 + ")");
    // this.text_group = this.svg.append("g")
    //   .attr("id", "text-group")
    //   .attr("transform", "translate(" + (0) + ", " + (this.wordcloud_height) + ")");
  },
};
</script>

<style>
.text-view {
  height: 57%;
}

.wordcloud-recyclebin {
  margin: 0px 50px 0 0;
  cursor: pointer;
}

.text-content {
  border: 0;
  height: calc(100% - 16px);
  margin: 10px;
    border-bottom: 1px solid #c1c1c1;

}

.label-div-btn {
  margin-left: 5px;
}

.wordcloud{
  cursor: default;
}

.wordcloud-col {
  height: 30%;
  /* border-bottom: 1px solid #888; */
}

.text-col {
  height: calc(70% - 60px);
}

.scroller {
  height: 100%;
}

.label-text {
  font-size: 20px;
  font-weight: 600;
}

#wordcloud-name{
  /* margin-top: 15px; */
    font-size: 18px;
    color: rgb(114, 114, 114);
    display: flex;
    align-items: center;
}

#selected-title{
  /* margin-top: 15px; */
    font-size: 18px;
    color: rgb(114, 114, 114);
}

#caption-name{
  margin-top: 15px;
    font-size: 18px;
    color: rgb(114, 114, 114);
}
.text-div{
  cursor: pointer;
  font-size: 16px;
  margin-left: 8px;
  margin-right: 8px;
  /*padding-top: 8px;*/
  padding-bottom: 8px;
  padding-left: 3px;
  border-bottom: 1px solid #ddd;
  word-break: break-all;

}
.text-div:hover {
  background: #ddd;
}

#selected-class-name{
  color: #428BCA;
  font-weight: 400;

}

.loading-wordcloud-svg{
  /* position: absolute;
    left: 85%;
    top: 15%; */
}
</style>