<template>
  <base-panel
    :loading="loading"
    panel-type="analysis"
    data-test="analysis-panel">

    <!-- Title and summary-->
    <template slot="title">
      <v-card-title class="py-0">
        <h2 class="font-weight-thin primary--text"><b>Analysis</b> | {{ analysisId }}</h2>
      </v-card-title>

      <p v-if="analysis.status" class="panel-details-items text-xs-left">
        <span :class="statusClass">{{ $get(analysis, 'status') }}</span>: {{ $get(analysis, 'application.name') }} {{ $get(analysis, 'application.version') }}
      </p>
    </template>

    <!-- Description-->
    <template slot="content">
      <v-container grid-list-md text-xs-left px-1>
        <v-layout v-if="$get(analysis, 'application.description', '')" row wrap my-2 class="panel-details-items">
          <v-flex md12>

            <base-editable-field
              :model="analysis"
              :rules="[rules.required]"
              :loading="loading"
              :has-permission="permissions.includes('change_application')"
              name="Description"
              field="application.description"
              show-as-html
              @update-value="updateValue"/>

          </v-flex>
        </v-layout>

        <!-- Analysis Details-->
        <v-layout row wrap my-2 class="panel-details-items">

          <v-flex md6>
            <base-static-field
              :model="analysis"
              name="Name"
              field="application.name"
              size="small"/>
          </v-flex>

          <v-flex md6>
            <base-static-field
              :model="analysis"
              name="Status"
              field="status"
              size="small"/>
          </v-flex>

          <v-flex sm6>
            <base-static-field
              :model="analysis"
              name="Version"
              field="application.version"
              size="small"/>
          </v-flex>

          <v-flex sm6>
            <base-static-field
              :model="analysis"
              name="App Key"
              field="application.pk"
              size="small"/>
          </v-flex>

          <v-flex sm6>
            <base-static-field
              :model="analysis"
              name="Created"
              field="created"
              format="calendar"
              size="small"/>
          </v-flex>

          <v-flex sm6>
            <base-static-field
              :model="analysis"
              name="Modified"
              field="modified"
              format="calendar"
              size="small"/>
          </v-flex>

          <v-flex sm12>
            <custom-fields :model="analysis"/>
          </v-flex>

          <v-flex sm12>
            <base-editable-field
              :model="analysis"
              :loading="loading"
              :has-permission="permissions.includes('change_analysis')"
              name="Notes"
              hint="Any extra information you want to add to the project."
              field="notes"
              @update-value="updateValue"/>
          </v-flex>

          <v-flex sm12>
            <tag-editable-field
              :model="analysis"
              :loading="loading"
              :has-permission="permissions.includes('change_analysis')"
              @update-value="updateValue"/>
          </v-flex>

        </v-layout>

      </v-container>

      <image-results />
      <file-results />
      <!-- Tables  -->
      <DataTable
        :params="experimentsAsTargetParams"
        model="experiments"
        title="Targets"/>

      <DataTable
        :params="experimentsAsReferenceParams"
        model="experiments"
        title="References"/>

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

    </template>

  </base-panel>
</template>

<script>
import { mapGetters } from 'vuex'
import BasePanel from '@/components/base/BasePanel.vue'
import DataTable from '@/components/search/DataTable.vue'
import BaseEditableField from '@/components/base/BaseEditableField'
import BaseStaticField from '@/components/base/BaseStaticField'
import CustomFields from '@/components/base/CustomFields'
import ImageResults from '@/components/results/ImageResults'
import FileResults from '@/components/results/FileResults'
import TagEditableField from '@/components/base/TagEditableField'

import { fetchRecord, updateRecord } from '@/utils/api'
import rules from '@/utils/rules'

export default {
  name: 'AnalysisPanel',
  components: {
    BaseEditableField,
    BasePanel,
    BaseStaticField,
    CustomFields,
    DataTable,
    FileResults,
    ImageResults,
    TagEditableField
  },
  data () {
    return {
      loading: false,
      analysis: {},
      rules
    }
  },
  computed: {
    ...mapGetters([
      'analysisId',
      'permissions'
    ]),
    analysesParams () {
      return {
        'analyses__pk': this.analysisId
      }
    },
    experimentsAsReferenceParams () {
      return {
        'analyses_as_reference': this.analysisId
      }
    },
    experimentsAsTargetParams () {
      return {
        'analyses_as_target': this.analysisId
      }
    },
    statusClass () {
      return `status-${this.$get(this.analysis, 'status').toLowerCase()}`
    }
  },
  watch: {
    analysisId () {
      this.fetchAnalysis()
    }
  },
  created () {
    this.fetchAnalysis()
  },
  methods: {
    async fetchAnalysis () {
      if (this.analysisId) {
        this.loading = true
        const response = await fetchRecord('analyses', this.analysisId)
        this.loading = false
        this.analysis = response
      }
    },
    async updateValue (data) {
      if (Object.keys(data).length) {
        this.loading = true
        const response = await updateRecord('analyses', this.analysisId, data)
        this.analysis = response
        this.loading = false
      }
    }
  }
}
</script>
