<template>
  <v-card>
    <v-card-text v-if="!dataLoaded">
      <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
    </v-card-text>
    <v-template v-else>
      <v-row dense>
        <v-col cols="12" md="7" lg="8">
          <v-card-subtitle>Overview</v-card-subtitle>
          <v-divider />
          <v-card-text>
            <p class="yellow lighten-4">
              The small YEATS protein domain is found in four human proteins,
              including MLLT1 and MLLT3, and is an epigenetic reader of
              acetyl-lysine histone marks. MLLT1 has been found to be a driver
              of acute myeloid leukaemia. A collaboration between Pfizer and the
              SGC has resulted in the discovery of PFI-6, a potent disrupter of
              protein:protein interactions involving the YEATS domains of
              MLLT1/3.
            </p>
          </v-card-text>
          <v-template v-if="!showStructureImgLaterally">
            <v-divider />
            <v-card-subtitle>Structure</v-card-subtitle>
            <v-divider />
            <MoleculeImage :molecule-chembl-id="itemID" />
          </v-template>
          <v-divider />
          <v-card-subtitle>Details</v-card-subtitle>
          <v-divider />
          <v-card-text>
            <v-row class="details-row" dense>
              <v-col cols="12">
                <b>Chemical Probe Name:</b>
                {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
              </v-col>
            </v-row>
            <v-divider />
            <v-row class="details-row" dense>
              <v-col cols="12" class="yellow lighten-4">
                <b>Negative control compound:</b>
                PFI-6N
              </v-col>
            </v-row>
            <v-divider />
            <v-row class="details-row" dense>
              <v-col
                cols="12"
                class="d-flex align-center flex-column flex-md-row"
              >
                <b>Synonyms:</b>
                <Synonyms
                  type="molecule_synonyms"
                  :molecule-synonyms="probeSummaryData.molecule_synonyms"
                />
              </v-col>
            </v-row>
            <v-divider />
            <v-row class="details-row yellow lighten-4" dense>
              <v-col cols="12">
                <b>Recommended in vitro assay concentration:</b>
                <p>
                  10 µM for PFI-6 and PFI-6N; use with negative control and
                  orthogonal probe for best interpretation of data
                </p>
              </v-col>
            </v-row>
            <v-divider />
            <v-row class="details-row yellow lighten-4" dense>
              <v-col cols="12">
                <b>Web link for more details:</b>
                <a
                  href="https://www.thesgc.org/chemical-probes/PFI-6"
                  target="_blank"
                  >https://www.thesgc.org/chemical-probes/PFI-6</a
                >
              </v-col>
            </v-row>
            <v-divider />

            <v-row class="details-row yellow lighten-4" dense>
              <v-col cols="12">
                <b>Publications:</b>
                None at the time of writing
              </v-col>
            </v-row>
            <v-divider />

            <v-row class="details-row yellow lighten-4" dense>
              <v-col cols="12">
                <b>Orthogonal chemical probes:</b>
                NVS-MLLT-1
              </v-col>
            </v-row>
            <v-divider />

            <v-row class="details-row yellow lighten-4" dense>
              <v-col cols="12">
                <b>Cellular assay(s) for target-engagement:</b>
                NanoBRET FRAP
              </v-col>
            </v-row>
            <v-divider />

            <v-row class="details-row yellow lighten-4" dense>
              <v-col cols="12">
                <b>Suitable for in vivo use:</b>
                no
              </v-col>
            </v-row>
            <v-divider />
          </v-card-text>

          <v-card-actions>
            <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-card-actions>
        </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>
    </v-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'

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
      }
    },
  },
  mounted() {
    this.$store.dispatch('probe/probeSummary/loadData', this.itemID)
  },
  methods: {
    getPropertyPalue: ObjectPropertyAccess.getPropertyPalue,
  },
}
</script>

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