<template>

  <base-panel
    :loading="loading"
    panel-type="bioModel"
    data-test="bio-model-panel">

    <!-- Title and summary-->
    <template slot="title">
      <v-card-title class="pa-0">
        <h2 class="font-weight-thin primary--text text-xs-left">{{ bioModelId }}</h2>
      </v-card-title>

    </template>

    <!-- BioModel Panel Actions -->
    <template slot="actions">
      <v-tooltip v-if="!isTreeShown" top>
        <v-icon
          slot="activator"
          small
          flat
          class="white--text"
          @click="isTreeShown = true">
          arrow_drop_up
        </v-icon>
        <span>Show Individual Tree</span>
      </v-tooltip>
    </template>

    <!-- Description-->
    <template slot="content">

      <!-- Summary Section-->
      <v-container
        class="panel-section py-2"
        text-xs-left>
        <span class="panel-details-items text-xs-left pa-0">
          <span class="primary--text subheading d-inline ml-3 my-0">{{ model | camelify}}</span>
          <span v-if="$get(bioModel, 'research_id', '')" class="mx-1">&nbsp;|&nbsp;&nbsp;{{ $get(bioModel, 'research_id') }} </span>
          <span v-if="$get(bioModel, 'technique.slug', '')" class="mx-1">&nbsp;|&nbsp;&nbsp;{{ $get(bioModel, 'technique.slug', '') }}</span>
        </span>
      </v-container>

      <!-- Bio Model Tree -->
      <bio-model-tree
        v-show="isTreeShown"
        @hide-tree="isTreeShown = false"/>

      <!-- Experiment Details Section -->
      <v-container class="panel-section white text-xs-left">

        <!-- Experiment Details-->
        <v-layout row wrap class="panel-details-items">

          <!-- <bio-model-description
            :model="individual"
            :fields="individualFields"
            title="INDIVIDUAL" />

          <bio-model-description
            :model="sample"
            :fields="sampleFields"
            title="SAMPLE" />

          <bio-model-description
            :model="experiment"
            :fields="experimentFields"
            title="WORKFLOW" />

          <bio-model-description
            :model="experiment"
            :fields="sequencingFields"
            title="SEQUENCING" /> -->

        </v-layout>

      </v-container>

      <!-- Tables  -->
      <DataTable
        :params="projectsParams"
        model="projects"/>

      <DataTable
        :params="analysesParams"
        model="analyses"/>

      <DataTable
        :params="experimentsParams"
        model="experiments"/>

    </template>

  </base-panel>
</template>

<script>
import DataTable from '@/components/search/DataTable.vue'
import BasePanel from '@/components/base/BasePanel.vue'
import BioModelDescription from '@/components/bioModels/BioModelDescription.vue'
import BioModelTree from '@/components/bioModels/BioModelTree.vue'

import { fetchRecord } from '@/utils/api'
import { viewFields } from '@/utils/constants'
import { UPDATE_INDIVIDUAL } from '@/store/actions/panels'

export default {
  name: 'BioModelPanel',
  components: {
    DataTable,
    BasePanel,
    BioModelDescription,
    BioModelTree
  },
  data () {
    return {
      isTreeShown: true,

      loading: false,
      bioModel: {},
      experiment: null,
      sample: null,
      individual: null,

      individualFields: viewFields['individual'],
      sequencingFields: viewFields['sequencing'],
      sampleFields: viewFields['sample'],
      experimentFields: viewFields['experiment']
    }
  },
  computed: {
    bioModelId () {
      return this.$store.getters.bioModelId
    },
    model () {
      if (this.bioModelId.includes('-')) {
        // This is created to provide backward compatibility to old models ID
        const oldModels = {
          3: 'individual',
          4: 'sample',
          7: 'experiment'
        }
        return oldModels[this.bioModelId.split('-').length]
      } else {
        const models = {
          1: 'individual',
          2: 'sample',
          3: 'experiment'
        }
        return models[this.bioModelId.split('_').length]
      }
    },
    projectsParams () {
      return {
        'experiments__system_id__startswith': this.bioModelId
      }
    },
    analysesParams () {
      return {
        'targets__system_id__startswith': this.bioModelId
      }
    },
    experimentsParams () {
      return {
        'system_id__startswith': this.bioModelId
      }
    }
  },
  watch: {
    bioModelId () {
      this.fetchModel()
    },
    individual () {
      this.$store.commit(UPDATE_INDIVIDUAL, this.individual.system_id)
    }
  },
  created () {
    this.fetchModel()
  },
  methods: {
    async fetchModel () {
      if (this.bioModelId) {
        this.loading = true
        const response = await fetchRecord(`${this.model}s`, this.bioModelId)
        this.loading = false
        this.bioModel = response
        this.updateModels()
      }
    },
    updateModels () {
      const { bioModel, model } = this
      if (model === 'experiment') {
        this.experiment = bioModel
        this.sample = bioModel.sample
        this.individual = bioModel.sample.individual
      } else if (model === 'sample') {
        this.experiment = null
        this.sample = bioModel
        this.individual = bioModel.individual
      } else if (model === 'individual') {
        this.experiment = null
        this.sample = null
        this.individual = bioModel
      }
    }
  }
}
</script>
