<template>
  <b-container :class="['c-templates-sidebar-fluid', currentContainerClass]" fluid>
    <b-row>
      <b-col cols="2" id="sidebar" ref="sidebar" class="sidebar d-print-none">
        <v-touch
          class="sidebar-wrapper"
          @swipeleft="$refs.currentH.overlapClicked()"
          @swiperight="$refs.currentH.overlapClicked()"
          :options="hammerOptions"
        >
          <slot name="sidebar">
            <component v-if="currentSidebar !== null" :is="currentSidebar" />
          </slot>
        </v-touch>
      </b-col>
      <b-col cols="10" class="content-wrapper">
        <slot name="header">
          <component v-if="currentHeader !== null" :is="currentHeader" ref="currentH" />
        </slot>
        <slot>
          <div class="ibs-logo d-none d-print-block">
            <img :src="ibsLogo" />
          </div>
          <div class="d-none sidebar-content-overlap" @click="$refs.currentH.overlapClicked()"></div>
          <component v-if="currentContent !== null" :is="currentContent" />
        </slot>
        <slot name="footer">
          <component v-if="currentFooter !== null" :is="currentFooter" />
        </slot>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import IBSLogo from '@/assets/img/img-ibslogo.png'
import SlotPropsSetter from '../../common/mixins/slot-props-setter'
import * as Hammer from 'hammerjs'

/*
 * Header Flex
 * This template displays a full screen view with the header on the top
 * and the content in a display:flex
 */
export default {
  name: 'SidebarFluid',
  props: ['header', 'footer'],
  mixins: [SlotPropsSetter],
  data() {
    return {
      ibsLogo: IBSLogo,
      currentHeader: null,
      currentFooter: null,
      currentSidebar: null,
      currentContent: null,
      currentContainerClass: null,
    }
  },
  mounted() {
    this.setSlotProp('header', 'currentHeader')
    this.setSlotProp('footer', 'currentFooter')
    this.setSlotProp('sidebar', 'currentSidebar')
    this.setSlotProp('content', 'currentContent')
    this.setSlotProp('containerClass', 'currentContainerClass')
  },
  computed: {
    hammerOptions() {
      return {
        cssProps: {
          userSelect: 'auto',
        },
        inputClass: Hammer.TouchInput,
      }
    },
  },
  watch: {
    '$route.path': {
      handler: function() {
        this.setSlotProp('header', 'currentHeader')
        this.setSlotProp('footer', 'currentFooter')
        this.setSlotProp('sidebar', 'currentSidebar')
        this.setSlotProp('content', 'currentContent')
        this.setSlotProp('containerClass', 'currentContainerClass')
      },
      immediate: true,
    },
  },
}
</script>
<style scoped>
.c-templates-full {
  min-height: 100vh;
}

.route-view {
  flex: 1;
  padding: 0px !important;
}
</style>
