<template>
  <div>
    <!-- Home Search  -->
    <v-container v-if="areAllPanelsHidden" grid-list-md text-xs-center pa-0>
      <home-search/>
    </v-container>

    <!-- Panels -->
    <v-container v-else grid-list-md text-xs-center pa-0>
      <div class="panels-container">

        <div v-if="panels['search']" class="panels">
          <search-panel/>
          <search-panel/>
        </div>

        <div v-if="panels['project'] || panels['submission']" class="panels">
          <project-panel/>
          <div class="ma-4"/>
          <submission-panel v-if="panels['submission']"/>
        </div>

        <div v-if="panels['bioModel']" class="panels">
          <bio-model-panel />
        </div>

        <div v-if="panels['analysis']" class="panels">
          <analysis-panel/>
        </div>

      </div>

    </v-container>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AnalysisPanel from '@/components/analyses/AnalysisPanel.vue'
import HomeSearch from '@/components/search/HomeSearch.vue'
import ProjectPanel from '@/components/projects/ProjectPanel.vue'
import BioModelPanel from '@/components/bioModels/BioModelPanel.vue'
import SearchPanel from '@/components/search/SearchPanel.vue'
import SubmissionPanel from '@/components/submissions/SubmissionPanel.vue'
import { SHOW_PANEL } from '@/store/actions/panels'

export default {
  name: 'Home',
  components: {
    AnalysisPanel,
    HomeSearch,
    ProjectPanel,
    BioModelPanel,
    SearchPanel,
    SubmissionPanel
  },
  computed: {
    ...mapGetters([
      'areAllPanelsHidden',
      'panels',
      'query',
      'submissionId'
    ])
  },
  watch: {
    query (query) {
      Object.keys(query).forEach(field => {
        if (!query[field] || query[field] === '-') {
          delete query[field]
        }
      })
      this.$router.push({ name: 'home', query })
    }
  },
  created () {
    const { query } = this.$route
    this.$store.dispatch(SHOW_PANEL, query)
  },
  methods: {
    onChangeSearchText (searchText) {
      this.$store.dispatch(SHOW_PANEL, {
        search: searchText
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    max-width: 100%;
  }
  .panels-container {
    display: flex;
    justify-content: center;
    padding: 12px;
    padding-top: calc(80px + 12px);
    max-width: 100%;
    margin: auto;
  }
  .panels {
    background: transparent;
    flex-grow: 1;
    width: 25%;
    max-width: 50%;
    margin: 12px;
    height: calc(100vh - 92px);
    overflow-y: auto;
    .layout .container {
      padding: 0
    }
  }
</style>
