<template>
  <AppLayout :loaded="loaded">
    <div class="container is-fluid">
      <div class="py-4 is-size-4">
        <span class="light-text">Investigation case</span>
        <span class="bold-text" style="margin-left: .5rem">Who killed Jeoffrey Baratheon?</span>
      </div>
      <div class="columns">
        <div class="column is-9">
          <OverviewSources :sources="sources" />
          <FiltersList :filters="filters" @create-filter="isFilterModalActive = true" />
          <VisDocumentsList :documents="documents" />
          <Reports :reports="reports" />
        </div>
        <div class="column is-3">
          <h2>Analytical modules</h2>
          <JobsPanel :jobs="jobs" @run-operation-1="isOperationModalActive = true" />
        </div>
      </div>
    </div>
    <!-- <CreateFilterModal
      v-if="primaryGraphInstanceId !== null"
      :instanceId="primaryGraphInstanceId"
      :show="isComponentModalActive"
      @hide="isComponentModalActive = false"
    /> -->

    <div class="modals">
      <b-modal :active="isFilterModalActive" :width="1200" destroy-on-hide>
        <CreateFilterModal @hide="isFilterModalActive = false" @save="saveFilter" />
      </b-modal>
      <b-modal :active="isOperationModalActive" :width="1200" destroy-on-hide>
        <RunOperationModal @hide="isOperationModalActive = false" />
      </b-modal>
    </div>

    <!-- <b-modal
            active.async="isComponentModalActive"
            has-modal-card
            trap-focus
            :destroy-on-hide="false"
            aria-role="dialog"
            aria-modal>
            <p class="image is-4by3">
                <img src="/static/img/placeholder-1280x960.png">
            </p>
        </b-modal> -->
  </AppLayout>
</template>

<script>
import JobsPanel from '@/components/OverviewDashboard/JobsPanel/index.vue'
import FiltersList from '@/components/OverviewDashboard/FiltersList/index.vue'
import OverviewSources from '@/components/OverviewDashboard/OverviewSources/index.vue'
import VisDocumentsList from '@/components/OverviewDashboard/VisDocuments/index.vue'
import CreateFilterModal from '@/components/OverviewDashboard/CreateFilterModal.vue'
import RunOperationModal from '@/components/OverviewDashboard/RunOperationModal.vue'
import Reports from '@/components/OverviewDashboard/Reports/index.vue'
import { mapGetters, mapState, mapActions } from 'vuex'
import AppLayout from '@/layouts/AppLayout'

export default {
  components: {
    VisDocumentsList,
    Reports,
    FiltersList,
    CreateFilterModal,
    RunOperationModal,
    OverviewSources,
    JobsPanel,
    AppLayout
  },
  data: () => {
    return {
      loaded: false,
      isFilterModalActive: false,
      isOperationModalActive: false
    }
  },

  computed: {
    ...mapGetters('workspace', ['getNotificationTime', 'jobs', 'documents', 'reports', 'sources']),
    ...mapState('workspace', ['jobs', 'documents', 'reports', 'sources', 'filters']),
    ...mapActions('workspace', ['createFilter']),

    newNotificationTime() {
      return this.getNotificationTime
    }
  },

  watch: {
    newNotificationTime() {
      this.showNotification = true
    }
  },
  async created() {
    let loader = this.$loading.show({
      container: null,
      canCancel: true
    })
    await this.$store.dispatch('workspace/fetchWorkspace')
    loader.hide()
    this.loaded = true
  },

  methods: {
    log() {
      console.log('in overview')
    },

    saveFilter($event) {
      this.createFilter($event)
    }
  }
}
</script>

<style lang="sass" scoped>
h1
  font-weight: $section-title-font-weight

.notification
  position: absolute
  right: 0
  background: transparent
  z-index: 1000
</style>
