<template>
  <div
    id="page-content-wrapper"
    class="main"
  >
    <fetch-protein :protein="protein">
      <template slot-scope="{ response, loading }">
        <slot
          :response="response"
          :loading="loading"
        >
          <div v-if="loading">
            Loading...
          </div>
          <div v-else-if="response !== null">
            <h2>{{ response.data.gene_name }}</h2>
            <h4 class="round">
              This is edit protein page
            </h4>
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="container-fluid col-md-12">
                  <div class="row">
                    <div class="text col-sm-3">
                      Name
                    </div>
                    <div class="col-sm-9">
                      <b>Protein {{ response.data.name }}</b>
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">
                      UniProt
                    </div>
                    <div class="col-sm-9">
                      <div v-if="response.data.uniprot_id">
                        <a
                          :href="
                            'https://www.uniprot.org/uniprot/' +
                              response.data.uniprot_id
                          "
                          class="uniprot-link"
                          target="_blank"
                        >
                          {{
                            response.data.uniprot_id +
                              " (" +
                              response.data.uniprot_readable_id +
                              ")"
                          }}
                          <i class="glyphicon glyphicon-link" /></a>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">
                      Pubmed Ids
                    </div>
                    <div class="col-sm-6">
                      <div>
                        <span
                          v-for="(item, index) in getPubMedIds(
                            response.data.pubmed_ids
                          )"
                          :key="index"
                        >
                          <a
                            :id="item"
                            :href="'https://pubmed.ncbi.nlm.nih.gov/' + item"
                            class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
                            target="_blank"
                            @mouseover="fetchPubMedId(item)"
                          >
                            {{ item }}
                            <i class="glyphicon glyphicon-link" />
                          </a>
                        </span>
                        <!-- <button
                            v-if="
                              getUserData !== null &&
                              getUserData !== 'Administrator'
                            "
                            class="btn btn-primary btn-link"
                            @click="
                              showAddOrDeletePubmedId = !showAddOrDeletePubmedId
                            "
                          >
                            <font-awesome-icon
                              icon="fa-solid fa-pen-to-square fa-xl"
                            />
                          </button>
                          <add-delete-pubmed
                            v-if="showAddOrDeletePubmedId"
                            :data="response.data"
                            @cancel="cancelAddOrDeletePubmedId"
                          /> -->
                      </div>
                      <div
                        id="more"
                        :class="{
                          active: response.data.pubmed_ids.length <= 7,
                        }"
                      >
                        <span
                          v-for="(item, index) in getMorePubIds(
                            response.data.pubmed_ids
                          )"
                          :key="index"
                        >
                          <a
                            :id="item"
                            :href="'https://pubmed.ncbi.nlm.nih.gov/' + item"
                            class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
                            target="_blank"
                            @mouseover="fetchPubMedId(item)"
                          >
                            {{ item }}
                            <i class="glyphicon glyphicon-link" />
                          </a>
                          <br v-if="index % 7 === 6">
                        </span>
                      </div>
                    </div>
                    <div
                      v-show="response.data.pubmed_ids.length > 7"
                      class="col-sm-2"
                    >
                      <a
                        v-show="!shownMore.pub"
                        class="uniprot-link"
                        @click="showMore('#more', 'pub', response.length)"
                      ><i
                        class="fa fa-angle-double-down"
                        aria-hidden="true"
                        style="color: royalblue"
                      />
                        Show more</a>
                      <a
                        v-show="shownMore.pub"
                        class="uniprot-link"
                        @click="showLess('#more', 'pub')"
                      ><i
                        class="fa fa-angle-double-up"
                        aria-hidden="true"
                        style="color: royalblue"
                      />
                        Show less</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">
                      Evidance star
                    </div>
                    <div class="col-sm-9">
                      stars
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <p class="text-success font-bold mt-4">
                        {{ message }}
                      </p>
                      <div class="flex space-x-4 mt-4">
                        <div>
                          <button
                            class="btn btn-danger"
                            @click="openModal"
                          >
                            Remove the protein
                          </button>
                        </div>
                        <div>
                          <button
                            class="btn btn-primary"
                            @click="$router.go(-1)"
                          >
                            Back
                          </button>
                        </div>
                        <the-delete-modal
                          :show="toggleModal"
                          :title="modalTitle"
                          :message="message"
                          @confirm="confirm(response.data)"
                          @cancel="cancel"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </slot>
      </template>
    </fetch-protein>
  </div>
</template>

<script>
import fetchProtein from './DDCODE/fetchProtein.vue';
import TheDeleteModal from './UI/TheDeleteModal.vue';
let host = require('./js/const').apiHost;
const $ = (window.jQuery = require('jquery'));
const _ = require('lodash');
require('./js/clipboard');
export default {
  components: { fetchProtein, TheDeleteModal },
  data() {
    return {
      protein: this.$route.params.proteinId,
      shownMore: {
        pub: false,
      },
      serverError: false,
      message: '',
      isDev: process.env.NODE_ENV === 'development',
      toggleModal: false,
      modalTitle: '',
    };
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt'];
    },
  },
  methods: {
    confirm(responceData) {
      this.modalTitle = '';
      this.deleteProtein(responceData);
    },
    cancel() {
      this.toggleModal = false;
      this.message = '';
    },
    showLess(id, clazz) {
      let $rows = $(id);
      $rows.removeClass('active');
      this.shownMore[clazz] = false;
    },
    showMore(id, clazz) {
      let $rows = $(id);
      $rows.addClass('active');
      this.shownMore[clazz] = true;
    },
    getPubMedIds(ids) {
      let outIds = [];

      ids.forEach((i, idx) => {
        outIds.push(`${i}`);
      });

      return outIds.slice(0, 7);
    },
    getMorePubIds(ids) {
      let outIds = [];

      ids.forEach((i) => {
        outIds.push(`${i}`);
      });

      return outIds.slice(7);
    },
    openModal() {
      this.modalTitle = 'Are you sure you want to delete this protein?';
      this.toggleModal = true;
    },
    async deleteProtein(responceData) {
      const vm = this;

      if (vm.isDev) {
        host = require('./js/const').devApiHost;
      }

      let url = `${host}/api/update-items`;

      let canonicalId = responceData.condensates[0].canonical_id;
      console.log(canonicalId);
      let data = {
        Entity: 'condensate',
        EntityId: canonicalId,
        ChangeOperation: 'remove',
        Attribute: 'proteins',
        Value: responceData.uniprot_id,
        Status: 'requested',
      };

      console.log(data);

      try {
        await this.axios.post(
          url,
          { data: data },
          {
            headers: {
              Authorization: `Bearer ${this.jwt}`,
            },
          }
        );
        this.message = 'Request submitted successfully!';
      } catch (e) {
        console.error(e);
        this.serverError = true;
        this.message =
          e.message || 'Something went wrong, please try again later!';
      }
    },
    fetchPubMedId(item) {
      const vm = this;
      // console.log(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];

              $row.attr(
                'aria-label',
                vm.getTitleAuthors(res.title, res.authors)
              );
            }, 0);
          });
      }
    },
    getTitleAuthors(title, data) {
      return `${title}\n\n${_.map(data, (a) => a.name).join(', ')}`;
    },
  },
};
</script>

<style>
@import url("~@/assets/bootstrap.css");
@import url("~@/assets/datatable.css");
@import url("~@/assets/tooltip.css");
</style>