<template>
  <div>
    <v-skeleton-loader v-if="loading" type="table" />
    <v-card-text v-else-if="showError">
      <div class="text-caption error--text">Error: {{ errorMsg }}.</div>
    </v-card-text>
    <template v-else>
      <Heatmap :heatmap-description="heatmapDescription" />
      compoundChEMBLIDs: {{ compoundChEMBLIDs.length }}
      {{ compoundChEMBLIDs }}
    </template>
  </div>
</template>

<script>
import Heatmap from '~/web-components-submodule/components/common/Visualisations/Heatmap/Heatmap.vue'
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
export default {
  components: {
    Heatmap,
  },
  props: {
    setID: {
      type: String,
      default: () => undefined,
    },
  },
  data() {
    return {
      loading: true,
      showError: false,
      errorMsg: undefined,
      compoundChEMBLIDs: [],
    }
  },
  computed: {
    heatmapDescription() {
      return {
        yAxis: {
          entityID: EntityNames.EubopenCompound.entityID,
          initialQuery: {
            sort: [{ '_metadata.related_targets.count': 'desc' }],
            query: {
              terms: {
                molecule_chembl_id: this.compoundChEMBLIDs,
              },
            },
          },
          headers: {
            label_property: 'pref_name',
            additional_properties: ['molecule_chembl_id'],
            mini_report_card_properties: [
              'molecule_synonyms',
              '_metadata.eubopen.in_vivo_use',
              'molecule_class',
              '_metadata.eubopen.is_probe',
              '_metadata.eubopen.is_control',
              '_metadata.eubopen.is_chemogenomic_probe',
            ],
          },
          footers: {
            label_properties: [
              'molecule_type',
              'molecule_properties.mw_freebase',
            ],
          },
        },
        xAxis: {
          entityID: EntityNames.EubopenTarget.entityID,
          initialQuery: {
            sort: [{ '_metadata.related_compounds.count': 'desc' }],
            query: {
              query_string: {
                query: `_metadata.related_compounds.all_chembl_ids:(${this.compoundChEMBLIDs.join(
                  ' OR '
                )})`,
              },
            },
          },
          headers: {
            label_property: 'pref_name',
            additional_properties: ['target_chembl_id'],
            mini_report_card_properties: [
              'target_synonyms',
              'target_type',
              'organism',
            ],
          },
          footers: {
            label_properties: ['organism', 'target_type'],
          },
        },
        cells: {
          entityID: EntityNames.EubopenActivity.entityID,
          properties: ['num_activities', 'fake_property'],
        },
      }
    },
  },
  async mounted() {
    try {
      const setItemsResponse = await ESProxyService.getGenericData(
        `eubopen/miscellaneous/dataset/${this.setID}`
      )
      console.log(setItemsResponse)
      const setItems = setItemsResponse.data.setItems
      console.log(setItems)
      const idsRawList = setItems.map((item) => item.molecule_chembl_id)
      this.compoundChEMBLIDs = [...new Set(idsRawList)]
      console.log(this.compoundChEMBLIDs)
    } catch (e) {
      this.showError = true
      this.errorMsg = e.message
    } finally {
      this.loading = false
    }
  },
}
</script>

<style></style>