<template>
  <div class="mainContent">
    <a ref="download" />
    <table
      :id="id"
      class="table table-striped table-bordered table-hover"
      width="100%"
    />
  </div>
</template>

<script>
const _ = require('lodash');
const $ = (window.jQuery = require('jquery'));
require('./js/datatable');

let table;

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: 'DataTable',
  props: ['id', 'data', 'category'],
  data() {
    return {};
  },
  mounted() {
    const vm = this;
    vm.createTable(vm.id, vm.data);
    // console.log("data table condensate", vm.data);
  },
  methods: {
    moveDetailPage(id) {
      const url = `/condensate/${id}`;
      // eslint-disable-next-line
      // console.log(url)
      window.open(url);
    },
    createTable(id, data) {
      const vm = this;

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

      const columns = [
        {
          title: 'Name',
          data: 'name',
          fnCreatedCell: (nTd, sData, oData) => {
            $(nTd).html(`<a href="" class="detail-link"> ${oData.name}</a>`);
          },
        },
        {
          title: 'Proteins',
          data: 'proteins',
          fnCreatedCell: (nTd, sData, oData) => {
            // console.log(sData)
            if (sData) {
              $(nTd).html(
                sData.length > 4
                  ? sData.splice(0, 4).join(", ") + " ..."
                  : sData.join(", ")
              );
            }
          },
        },
        {
          title: 'No. Proteins',
          render: function (data, type, row, meta) {
            return row.protein_count;
          },
        },
        // {
        //   title: 'Biomolecular/Synthetic',
        //   data: 'is_experimental',
        //   render: function ( data, type, row, meta ) {
        //     return data ? 'Synthetic' : 'Biomolecular';
        //   }
        // },
        // {
        //   title: 'Localization',
        //   render: function ( data, type, row, meta ) {
        //     return '(placeholder)';
        //   }
        // },
       
        {
          title: 'Species',
          data: 'species_name',
          render: function (data, type, row, meta) {
            if (data) {
              return data + ' (' + row.species_tax_id + ')';
            } else {
              return 'Chimeras';
            }
          },
        },
         {
          title: 'Evidence Stars',
          data: 'confidence_score',
          defaultContent: `0`,
          render: function ( data, type, row, meta ) {
            return data;
          },
          fnCreatedCell: (nTd, sData, oData) => {
            // console.log(sData)
            if(sData) {
              $(nTd).html(getRating(sData).join('\n'));
            } else {
              $(nTd).html(getRating(0).join('\n'));
            }
          }
        },
      ];

      const nTableOptions = {
        columns,
        aaSorting: [[0, 'asc']],
        paging: true,
        searching: true,
        info: true,
        data,
        pageLength: 100,
        order: [[2, 'desc']], // order: [[0, 'asc']],
        bDestroy: true, // Add this property to new setting,
        oLanguage: {
          sSearch: 'Filter ',
        },
        dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
        // dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
      };

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

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

      $("#download").html(
        '<div style="text-align: right;"><div class="dropdown">\n' +
          '  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
          '    Download\n' +
          '  </button>\n' +
          '  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n' +
          '    <a class="dropdown-item" href="#" ref="csv">CSV</a>\n' +
          '    <a class="dropdown-item" href="#" ref="tsv">TSV</a>\n' +
          '    <a class="dropdown-item" href="#" ref="json">JSON</a>\n' +
          "  </div>\n" +
          "</div></div>"
      );

      const tableBody = `${tableId} tbody`;

      $(tableBody).on('click', 'tr td a.detail-link', (e) => {
        e.preventDefault();
        const tr = $(e.target).parent().parent();
        const row = table.row(tr);
        // console.log(row.data())
        vm.moveDetailPage(row.data().canonical_id);
      });

      $('#download').on('click', 'a.dropdown-item', (e) => {
        e.preventDefault();
        switch ($(e.target).text()) {
          case 'CSV':
            vm.downloadCsv();
            break;
          case 'TSV':
            vm.downloadTsv();
            break;
          case 'JSON':
            vm.downloadJson();
            break;
        }
      });
    },
    downloadCsv() {
      const vm = this;
      let exports = [];

      let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];

      exports.push(header.join(', '));

      _.forEach(vm.data, (item) => {
        let proteins = [];
        _.each(item.proteins, (i) => {
          proteins.push(`${i}`);
        });

        exports.push([`"${item.name}"`, `"${item.canonical_id}"`, `"${item.is_experimental ? 'Synthetic' : 'Biomolecular'}"`, `"${item.species_name}"`, item.species_tax_id,`"${proteins.join('\t')}"`].join(','));
      });

      let blob = new Blob([exports.join('\n')], { type: 'text/csv' });

      let contentDisposition =
        'Content-Disposition: attachment; filename="download-data.csv"';
      let filename = contentDisposition.split('filename=')[1];
      filename = filename.replace(/"/g, '');

      let link = vm.$refs.download;
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    },
    downloadTsv() {
      const vm = this;
      let exports = [];

      let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];

      exports.push(header.join(', '));

      _.forEach(vm.data, (item) => {
        let proteins = [];
        _.each(item.proteins, (i) => {
          proteins.push(`${i}`);
        });


        exports.push([item.name, item.canonical_id, item.is_experimental ? 'Synthetic' : 'Biomolecular', item.species_name, item.species_tax_id, proteins.join(', ')].join('\t'));
      });

      let blob = new Blob([exports.join('\n')], { type: 'text/tsv' });

      let contentDisposition =
        'Content-Disposition: attachment; filename="download-data.tsv"';
      let filename = contentDisposition.split('filename=')[1];
      filename = filename.replace(/"/g, '');

      let link = vm.$refs.download;
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    },
    downloadJson() {
      const vm = this;
      let blob = new Blob([JSON.stringify(vm.data, null, 2)], {
        type: 'application/json',
      });

      let contentDisposition =
        'Content-Disposition: attachment; filename="download-data.json"';
      let filename = contentDisposition.split('filename=')[1];
      filename = filename.replace(/"/g, '');

      let link = vm.$refs.download;
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    },
  },
};
</script>

<style>
  .mainContent {
    padding: 20px;
  }

  .checked {
    color: orange;
  }
  .no-padding {
    padding: 0;
  }

  .gene {
    font-size: large;
  }

  table.pheno {
    width: 330px;
  }

  td.pheno-title {
    text-align: center;
  }
  td.pheno {
    width: 33%;
    border-top: none;
    border-bottom: none;
    text-align: center;
    vertical-align: middle;
    font-size: small;
    word-wrap: break-spaces;
  }

  td.pheno-item {
    width: 33%;
    text-align: center;
    border-width: 0 1px;
    word-wrap: break-word;
  }

  .table thead td.pheno {
    border-width: 0 1px;
  }

  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;
  }

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

  .dropdown-item {
    font-size: 1.2rem;
  }

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

  .pagination {
    font-size: 1.2rem;
  }

  a mark {
    color: #0065b9;
    padding: 0;
    text-decoration: underline;
    font-style: oblique;
  }
</style>