<template>
  <v-card outlined>
    <v-card-text v-if="!dataLoaded">
      <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
    </v-card-text>
    <v-card-text v-else>
      <v-row class="details-row" dense>
        <v-col cols="12">
          <b>Type:</b>
          {{
            getPropertyPalue(nameAndClassificationData, 'target_type', '---')
          }}
        </v-col>
      </v-row>
      <v-divider />
      <v-row class="details-row" dense>
        <v-col cols="12">
          <b>Preferred Name:</b>
          {{ getPropertyPalue(nameAndClassificationData, 'pref_name', '---') }}
        </v-col>
      </v-row>
      <v-divider />
      <v-row class="details-row" dense>
        <v-col cols="12">
          <div class="d-flex align-center flex-column flex-md-row">
            <b>Synonyms:</b>
            <Synonyms
              type="target_synonyms"
              :target-components="nameAndClassificationData.target_components"
            />
          </div>
        </v-col>
      </v-row>
      <v-divider />
      <v-row class="details-row" dense>
        <v-col cols="12">
          <b>Organism:</b>
          {{ getPropertyPalue(nameAndClassificationData, 'organism', '---') }}
        </v-col>
      </v-row>
      <v-divider />
      <v-row class="details-row" dense>
        <v-col cols="12">
          <b>Species Group:</b>
          {{ speciesGroup }}
        </v-col>
      </v-row>
      <v-divider />
      <v-row class="details-row" dense>
        <v-col cols="12">
          <div class="d-flex align-center flex-column flex-md-row">
            <b>Protein Target Classification:</b>

            <ProteinTargetClassification
              :protein-classifications="
                nameAndClassificationData._metadata.protein_classification
              "
            />
          </div>
        </v-col>
      </v-row>
      <v-divider />
    </v-card-text>
  </v-card>
</template>

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

export default {
  components: {
    Synonyms,
    ProteinTargetClassification,
  },
  props: {
    itemID: {
      type: String,
      default: () => undefined,
    },
  },
  computed: mapState({
    dataLoaded: (state) => state.target.nameAndClassification.dataLoaded,
    nameAndClassificationData: (state) =>
      state.target.nameAndClassification.nameAndClassificationData,
    speciesGroup: (state) => {
      const speciesGroupFlag =
        state.target.nameAndClassification.nameAndClassificationData
          .species_group_flag
      if (speciesGroupFlag == null) {
        return '---'
      }
      if (speciesGroupFlag) {
        return 'Yes'
      }
      return 'No'
    },
  }),
  mounted() {
    this.$store.dispatch('target/nameAndClassification/loadData', this.itemID)
  },
  methods: {
    getPropertyPalue: ObjectPropertyAccess.getPropertyPalue,
  },
}
</script>

<style scoped>
.details-row {
  margin: 0;
}
</style>