<template>
  <v-card>
    <v-card-text v-if="!dataLoaded">
      <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
    </v-card-text>
    <template v-else>
      <v-row dense>
        <v-col cols="12" md="7" lg="8">
          <template v-if="!showStructureImgLaterally">
            <v-divider />
            <v-card-subtitle>Structure</v-card-subtitle>
            <v-divider />
            <MoleculeImage :molecule-chembl-id="itemID" />
          </template>
          <v-card-subtitle>Details</v-card-subtitle>
          <v-divider />
          <v-card-text>
            <v-row dense>
              <v-col cols="12">
                <div><b>EUbOPEN ID:</b> {{ itemID }}<v-divider /></div>
              </v-col>
              <v-col cols="12">
                <div>
                  <b>Name:</b>
                  {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
                  <v-divider />
                </div>
              </v-col>
              <v-col cols="12">
                <div>
                  <b>Synonyms:</b>
                  <br />
                  <Synonyms
                    type="molecule_synonyms"
                    :entity-i-d="entityID"
                    :item-i-d="itemID"
                  />
                  <v-divider />
                </div>
              </v-col>
              <v-col cols="12">
                <div>
                  <b>Suitable for in vivo use:</b>
                  {{
                    getPropertyPalue(
                      probeSummaryData,
                      '_metadata.eubopen.in_vivo_use'
                    )
                      ? 'Yes'
                      : 'No'
                  }}
                  <v-divider />
                </div>
              </v-col>
              <v-col cols="12">
                <b>Download probe data package:</b>
                <br /><br />
                <v-btn
                  href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
                  color="primary"
                >
                  <v-icon>mdi-download</v-icon> PDF
                </v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-col>
        <v-col
          v-if="showStructureImgLaterally"
          cols="4"
          md="5"
          lg="4"
          class="molecule-img-container"
        >
          <MoleculeImage :molecule-chembl-id="itemID" bordered />
        </v-col>
      </v-row>
    </template>
  </v-card>
</template>

<script>
import { mapState } from 'vuex'
import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'
import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'

export default {
  components: {
    Synonyms,
    MoleculeImage,
  },
  props: {
    itemID: {
      type: String,
      default: () => undefined,
    },
  },
  computed: {
    ...mapState({
      dataLoaded: (state) => state.probe.probeSummary.dataLoaded,
      probeSummaryData: (state) => state.probe.probeSummary.probeSummaryData,
    }),
    showStructureImgLaterally() {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs':
          return false
        case 'sm':
          return false
        default:
          return true
      }
    },
    entityID() {
      return EntityNames.EubopenCompound.entityID
    },
  },
  mounted() {
    this.$store.dispatch('probe/probeSummary/loadData', this.itemID)
  },
  methods: {
    getPropertyPalue: ObjectPropertyAccess.getPropertyPalue,
  },
}
</script>

<style scoped lang="scss">
.molecule-img-container {
  padding-right: 10px;
}
</style>