<template>
  <div>

    <v-container
      class="elevation-4"
      grid-list-md
      text-xs-center>

      <v-layout row wrap>
        <v-flex xs12>

          <v-layout row wrap class="panel-title text-xs-left">
            <v-flex md8>
              <slot name="title">
                Slot for Panel Title
              </slot>
            </v-flex>

            <v-flex
              md4 layout justify-end align-start ma-0 pt-2
              class="panel-slot-actions">
              <slot name="actions"/>

              <div v-if="minimizable">
                <v-tooltip v-if="fullView" top>
                  <v-icon
                    slot="activator"
                    small
                    class="primary--text"
                    @click="$emit('minimize-panel')">
                    arrow_drop_up
                  </v-icon>
                  <span>Minimize {{ panelType }} panel</span>
                </v-tooltip>

                <v-tooltip v-else top>
                  <v-icon
                    slot="activator"
                    small
                    class="primary--text"
                    @click="$emit('maximize-panel')">
                    arrow_drop_down
                  </v-icon>
                  <span>Maximize {{ panelType }} panel</span>
                </v-tooltip>
              </div>

              <v-tooltip top>
                <v-icon
                  slot="activator"
                  small
                  class="primary--text"
                  @click="hidePanel">
                  close
                </v-icon>
                <span>Close {{ panelType }} panel</span>
              </v-tooltip>
            </v-flex>
          </v-layout>

          <v-progress-linear
            v-if="loading"
            class="panel-loader"
            indeterminate
            height="2"
            my-0
            color="primary"/>
          <v-divider
            v-else
            class="panel-title-divider" />

          <div
            v-show="fullView"
            :style="contentStyle"
            class="panel-content">
            <slot name="content">
              Slot for Panel Content
            </slot>
          </div>

        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import { HIDE_PANEL } from '@/store/actions/panels'

export default {
  name: 'base-panel',
  props: {
    fullView: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    minimizable: {
      type: Boolean,
      default: false
    },
    panelType: {
      type: String,
      required: true
    },
    contentStyle: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    hidePanel () {
      this.$store.dispatch(HIDE_PANEL, this.panelType)
    }
  }
}
</script>

<style lang="scss">
  .panel-title {
    height: 70px;
  }
  .panel-content {
    overflow-y: scroll;
    height: calc(100vh - 244px); // 100 % - (navbar + margins + titles)px
  }
  .panel-title-divider {
    margin-top: 1px;
  }
  .panel-loader.v-progress-linear {
    margin: 0;
  }
  .panel-slot-actions .v-icon {
    font-size: 28px !important;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer;
  }
</style>
