<template>
  <div>
    <div class="inline-block no-underline font-bold mb-4" />
    <table
      :id="id"
      class="table table-striped table-bordered table-hover"
      width="100%"
    />

    <the-action-modal
      v-if="toggleActionModal"
      :protein-uniprot="uniprotId"
      :show="toggleActionModal"
      :pubmed="pubmed"
      :canonical-id="canonicaliD"
      :protein-evidence-score="proteinConfidenceScore"
      @close="closeModal"
    />
    <the-delete-modal
      v-if="toggleDeleteModal"
      :show="toggleDeleteModal"
      :canonical-id="canonicalId"
      :uniprot-id="uniprotId"
      @cancel="closeDeleteModal"
    />
  </div>
</template>

<script>
import TheActionModal from "./UI/TheActionModal.vue";
import TheDeleteModal from "./UI/TheDeleteModal.vue";

const _ = require("lodash");
const $ = (window.jQuery = require("jquery"));
require("./js/clipboard");
require("@/components/js/datatable");

let table;

const scoreMap = {
  "http://llps.biocuckoo.cn/": 1,
  "http://db.phasep.pro/browse/highthroughput/": 2,
  "http://db.phasep.pro/browse/reviewed/": 4,
  "http://db.phasep.pro/browse/uniprotreviewed/": 4,
  "http://bio-comp.org.cn/llpsdb/": 4,
  "https://phasepro.elte.hu/": 4,
  "https://pubmed.ncbi.nlm.nih.gov/": 4,
  "https://ddcode.org/": 5,
};

function getStartWith(url) {
  let ret = "";
  _.forEach(_.keys(scoreMap), (i) => {
    if (url.startsWith(i)) {
      ret = i;
    }
  });

  return ret;
}

function getRating(data) {
  const rating = data;
  const r = ['<div style="white-space: nowrap;">'];
  for (let i = 0; i < 5; i++) {
    if (i < rating) {
      if (rating - i === 0.5) {
        r.push('<span class="fa fa-star-half-o checked"/>');
      } else {
        r.push('<span class="fa fa-star checked"/>');
      }
    } else {
      r.push('<span class="fa fa-star"/>');
    }
  }

  r.push("</div>");
  return r;
}

export default {
  name: "LlpsTable",
  components: {
    TheActionModal,
    TheDeleteModal,
  },
  props: [
    "id",
    "data",
    "map",
    "pubmed",
    "dbTags",
    "isExperimental",
    "canonicalId",
  ],
  data() {
    return {
      toggleActionModal: false,
      toggleDeleteModal: false,
      uniprotId: "",
      selectedRowData: "",
      canonicaliD: "",
      proteinConfidenceScore: 0,
    };
  },
  mounted() {
    const vm = this;

    vm.createTable(vm.id, vm.data);
    // console.log("in table pubmed data", this.data);
  },
  methods: {
    closeModal() {
      this.toggleActionModal = false;
    },
    closeDeleteModal() {
      this.toggleDeleteModal = false;
    },
    fetchProtein(uniprot_id) {
      // eslint-disable-next-line
      const url = `/protein/${uniprot_id}`;
      // // eslint-disable-next-line
      // console.log(url)
      // this.$router.push(url)
      window.open(url);
    },
    forwardUniprot(uniprot_id) {
      // eslint-disable-next-line
      const url = `https://www.uniprot.org/uniprot/${uniprot_id}`;
      // // eslint-disable-next-line
      // console.log(url)
      window.open(url);
    },
    createLink(link) {
      return `<a href="${link}" class="external-link tooltipped tooltipped-n tooltipped-multiline"
                    aria-label="Clicking this link opens Evidence page." target="_blank"> ${link}
                    </a>`;
    },
    createPubMedLink(item) {
      return `<a id="${item}" href="https://pubmed.ncbi.nlm.nih.gov/${item}" class="pubmed-link tooltipped tooltipped-n tooltipped-multiline"
                    target="_blank">
                    ${item}
                <i class="glyphicon glyphicon-link"></i>
                </a>`;
    },
    fetchPubMedId(item) {
      // console.log(item)
      if (item) {
        const url =
          "https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id=";
        const request = url + item;
        let $row = $("#" + item);

        if (!$row.attr("aria-label")) {
          fetch(request)
            .then((response) => response.json())
            .then((response) => {
              setTimeout(() => {
                const res = response.result[item];

                $(`a[id="${item}"]`).each(function () {
                  $(this).attr(
                    "aria-label",
                    `${res.title}\n\n${_.map(res.authors, (a) => a.name).join(
                      ", "
                    )}`
                  );
                });
              }, 0);
            });
        }
      }
    },
    createTable(id, data) {
      const vm = this;

      _.forEach(data, (d) => {
        d.DT_RowID = `${d.n}`;
      });

      const columns = vm.isExperimental
        ? [
            {
              title: "UniProt",
              data: "uniprot_id",
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                $(nTd).html(`<a href="" class="protein-link"> ${sData} </a>`);
              },
            },
            {
              title: "Gene Name",
              data: "gene_name",
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(`<a href="" class="protein-link"> N/A</a>`);
                }
              },
            },
            {
              title: "Name",
              data: "name",
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(
                    `<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
                  );
                }
              },
            },
            {
              title: "Name",
              data: "name",
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(
                    `<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
                  );
                }
              },
            },
            // {
            //   title: 'Species',
            //   data: 'species_name',
            //   className: "text-nowrap"
            // },
            // {
            //   title: 'Evidences',
            //   data: 'species_name',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     // console.log(sData)
            //     let data = vm.map[oData.uniprot_id];
            //     if(data) {
            //       // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
            //       $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
            //     } else {
            //       $(nTd).html('')
            //     }
            //   }
            // },
            {
              title: "Pubmed",
              data: "uniprot_id",
              className: "text-nowrap",
              render: function (data, type, row, meta) {
                if (vm.pubmed) {
                  let dat = vm.pubmed[row.uniprot_id];
                  if (dat) {
                    return dat.join(", ");
                  } else {
                    return "";
                  }
                } else {
                  return "";
                }
              },
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                if (vm.pubmed) {
                  let data = vm.pubmed[oData.uniprot_id];
                  if (data) {
                    // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                    // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                    $(nTd).html(
                      data.map((i) => vm.createPubMedLink(i)).join(" ")
                    );
                  } else {
                    $(nTd).html("");
                  }
                } else {
                  $(nTd).html("");
                }
              },
            },

            {
              title: "DB",
              data: "uniprot_id",
              className: "text-nowrap",
              render: function (data, type, row, meta) {
                // console.log(_.flatMap(row.condensates, c => c.data_sources))
                let dat = vm.dbTags[row.uniprot_id];
                if (dat) {
                  return dat.join(", ");
                }
                return "";
              },
            },
            // {
            //   title: 'Evidence',
            //   data: 'uniprot_id',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     $(nTd).html(`${vm.map[oData.uniprot_id]}`);
            //   },
            // },
            // {
            //   title: 'Sequence',
            //   data: 'sequence',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     $(nTd).html(`<input type="text" value="${sData}">
            //           <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
            //   },
            // }
            {
              title: "Evidence Stars",
              className: "text-nowrap",
              data: "uniprot_id",
              render: function (data, type, row, meta) {
                // console.log(_.flatMap(row.condensates, c => c.data_sources))
                let dat = vm.map[row.uniprot_id];
                if (dat) {
                  return dat;
                }
                return "";
              },
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                let data = vm.map[oData.uniprot_id]
                if (data) {
                  $(nTd).html(getRating(data).join("\n"));
                }
              },
            },
          ]
        : [
            {
              title: "UniProt",
              data: "uniprot_id",
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                $(nTd).html(`<a href="" class="protein-link"> ${sData} </a>`);
              },
            },
            {
              title: "Gene Name",
              data: "gene_name",
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(`<a href="" class="protein-link"> N/A</a>`);
                }
              },
            },
            {
              title: "Name",
              data: "name",
              fnCreatedCell: (nTd, sData, oData) => {
                if (sData) {
                  $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
                } else {
                  $(nTd).html(
                    `<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
                  );
                }
              },
            },
            // {
            //   title: 'Evidences',
            //   data: 'uniprot_id',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     // console.log(sData)
            //     let data = vm.map[oData.uniprot_id];
            //
            //     if(data) {
            //       // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
            //       $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
            //     } else {
            //       $(nTd).html('')
            //     }
            //   }
            // },
            {
              title: "Pubmed",
              data: "uniprot_id",
              className: "text-nowrap",
              render: function (data, type, row, meta) {
                if (vm.pubmed) {
                  let dat = vm.pubmed[row.uniprot_id];
                  if (dat) {
                    return dat.join(", ");
                  } else {
                    return "";
                  }
                } else {
                  return "";
                }
              },
              fnCreatedCell: (nTd, sData, oData) => {
                // console.log(sData)
                if (vm.pubmed) {
                  let data = vm.pubmed[oData.uniprot_id];
                  if (data) {
                    // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
                    // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
                    $(nTd).html(
                      data.map((i) => vm.createPubMedLink(i)).join(" ")
                    );
                  } else {
                    $(nTd).html("");
                  }
                } else {
                  $(nTd).html("");
                }
              },
            },
            {
              title: "DB",
              data: "uniprot_id",
              className: "text-nowrap",
              render: function (data, type, row, meta) {
                // console.log(_.flatMap(row.condensates, c => c.data_sources))
                let dat = vm.dbTags[row.uniprot_id];
                if (dat) {
                  return dat.join(", ");
                }
                return "";
              },
            },
            // {
            //   title: 'Evidence',
            //   data: 'uniprot_id',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     $(nTd).html(`${vm.map[oData.uniprot_id]}`);
            //   },
            // },
            // {
            //   title: 'Sequence',
            //   data: 'sequence',
            //   className: "text-nowrap",
            //   fnCreatedCell: (nTd, sData, oData) => {
            //     $(nTd).html(`<input type="text" value="${sData}">
            //           <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
            //   },
            // }
            {
              title: "Evidence Stars",
              className: "text-nowrap",
              data: "uniprot_id",
              render: function (data, type, row, meta) {
                // console.log(_.flatMap(row.condensates, c => c.data_sources))
                let dat = vm.map[row.uniprot_id];
                if (dat) {
                  // console.log(getRatingValue(vm.map[row.uniprot_id]))
                  return dat;
                }
                return "";
              },
              fnCreatedCell: (nTd, sData, oData) => {
                let data = vm.map[oData.uniprot_id];
                if (data) {
                  $(nTd).html(getRating(data).join("\n"));
                }
              },
            },
            {
              title: "Action",
              data: "uniprot_id",
              className: "text-nowrap",
              fnCreatedCell: (nTd, sData, oData) => {
                $(nTd).html(
                  `<button class="btn btn-primary edit-link btn-outline font-bold" style="font-weight:bold">
                    <i class="fa fa-edit" style="font-weight:bold"></i>
                    </button>
                    <button class="btn btn-danger delete-link btn-outline font-bold" style="font-weight:bold">
                    <i class="fa fa-trash" style="font-weight:bold"></i>
                    </button>
                    `
                );
              },
              // render: function (data, type, row, meta) {
              //   if (this.$store.getters["User/userRole"] === "Maintainer") {
              //     $(nTd).html(
              //       `<button class="btn btn-primary btn-outline font-bold" style="font-weight:bold">Edit
              //       <i class="fa ml-2 fa-edit" style="font-weight:bold"></i>
              //       </button>`
              //     );
              //   } else {
              //     return "";
              //   }
              // },
            },
          ];

      const nTableOptions = {
        columns,
        // aaSorting: [[ 0, 'asc' ]],
        lengthMenu: [
          [10, 25, 50, -1],
          [10, 25, 50, "All"],
        ],
        paging: true,
        searching: true,
        info: false,
        data,
        order: [], // order: [[0, 'asc']],
        bDestroy: true, // Add this property to new setting,
        oLanguage: {
          sSearch: "Filter",
        },
        dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
      };

      const tableId = `#${id}`;
      if (table) {
        table.destroy();
        $(tableId).empty();
      }

      table = $(tableId).DataTable(nTableOptions);

      if (
        !this.$store.getters["User/userRole"] ||
        this.$store.getters["User/userRole"] === "Administrator" || this.$store.getters["User/userRole"] === "Authenticated"
      ) {
        table.column(6).visible(false);
      }

      const tableBody = `${tableId} tbody`;

      $(tableBody).on("click", "tr td a.protein-link", (e) => {
        e.preventDefault();
        const tr = $(e.target).parent().parent();
        const row = table.row(tr);
        vm.fetchProtein(row.data().uniprot_id);
      });

      $(tableBody).on("click", "tr td a.uniprot-link", (e) => {
        e.preventDefault();
        const tr = $(e.target).parent().parent();
        const row = table.row(tr);
        vm.forwardUniprot(row.data().uniprot_id);
      });
      $(tableBody).on("click", "tr td button.edit-link", (e) => {
        e.preventDefault();

        const tr = $(e.target).parent().parent();
        const row = table.row(tr);
        const id = row.data().uniprot_id;
        let findScore;
        for (let score in vm.map) {
          if (score === id) {
            findScore = vm.map[score];
          }
        }
        console.log("rating is", findScore);
        vm.proteinConfidenceScore = findScore;
        vm.selectedRowData = row.data();
        vm.uniprotId = id;
        vm.canonicaliD = vm.canonicalId;
        vm.toggleActionModal = true;
        // vm.$router.push(`/protein/editDetails/${id}`);
        // vm.fetchPubMedId(e.target.id);
      });
      $(tableBody).on("click", "tr td button.delete-link", (e) => {
        e.preventDefault();

        const tr = $(e.target).parent().parent();
        const row = table.row(tr);
        const id = row.data().uniprot_id;
        vm.uniprotId = id;
        console.log("delete uniprotid is", id);
        vm.toggleDeleteModal = true;
        // vm.$router.push(`/protein/editDetails/${id}`);
        // vm.fetchPubMedId(e.target.id);
      });
      $(tableBody).on("mouseover", "tr td a.pubmed-link", (e) => {
        e.preventDefault();
        // console.log(e.target.id)
        vm.fetchPubMedId(e.target.id);
      });
    },
    exportTsv() {
      // const vm = this;
    },
  },
};
</script>

<style>
table.dataTable.row-border > tbody > tr:first-child > th,
table.dataTable.row-border > tbody > tr:first-child > td,
table.dataTable.display > tbody > tr:first-child > th,
table.dataTable.display > tbody > tr:first-child > td {
  border-top: none;
}

table.dataTable.row-border > tbody > tr > th,
table.dataTable.row-border > tbody > tr > td,
table.dataTable.display > tbody > tr > th,
table.dataTable.display > tbody > tr > td {
  border-top: 1px solid #ddd;
}

table.dataTable > tbody > tr {
  background-color: #ffffff;
}

table.dataTable.row-border > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
  background-color: #f6f6f6;
}

select.form-control {
  font-size: 12px;
  padding: 3px 12px;
}

ul.pagination {
  font-size: 1rem;
}

.form-inline .form-control {
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
}

.protein-link {
  font-weight: bold;
  color: #0065b9;
}

.uniprot-link {
  font-weight: bold;
  color: #0065b9;
}

.pubmed-link {
  font-weight: bold;
  color: #0065b9;
}

.external-link {
  font-weight: bold;
  color: #0065b9;
}

.pagination {
  font-size: 1.2rem;
}
</style>