<template>
  <div :class="$style.panel">
    <div
      :class="$style.panelHeading"
      :style="[
        headerUppercase ? { 'text-transform': 'uppercase' } : null,
        { 'background-color': headerBgColor },
        { padding: headerPadding },
        { 'text-align': headerTitleAlign },
        { color: headerColorTitle },
        { 'font-weight': headerWeightTitle },
        { 'font-size': headerFontSize + 'px' }
      ]"
    >
      {{ headerTitle }}
      <div
        v-if="canCollapse"
        @click="showContent = !showContent"
        :class="{ panelCollapseIndicator: canCollapse }"
        style="float: right"
      >
        <i class="saglan-icon-up" v-if="!showContent"></i>
        <i v-else class="saglan-icon-down"></i>
      </div>
      <slot name="buttons"></slot>
    </div>
    <collapse-transition>
      <div v-show="showContent" :class="$style.bodyPage" class="panel-default-body">
        <slot>Content Body.</slot>
      </div>
    </collapse-transition>
  </div>
</template>

<script>
import { CollapseTransition } from "@ivanv/vue-collapse-transition";
export default {
  name: "Panel-default",
  data() {
    return {
      showContent: true
    };
  },
  props: {
    headerTitle: {
      type: String,
      default: "Panel heading without title"
    },
    headerUppercase: {
      type: Boolean,
      default: true
    },
    headerBgColor: {
      type: String,
      default: "#133250"
    },
    headerPadding: {
      type: String,
      default: "15px 20px"
    },
    headerTitleAlign: {
      type: String,
      default: "center"
    },
    headerColorTitle: {
      type: String,
      default: "#ffffff"
    },
    headerWeightTitle: {
      type: Number,
      default: 400
    },
    bodyPadding: {
      type: Number,
      default: 20
    },
    headerFontSize: {
      type: Number,
      default: 12
    },
    canCollapse: {
      type: Boolean,
      default: false
    },
    defaultCollapsed: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.showContent = !this.defaultCollapsed;
  },
  components: {
    CollapseTransition
  }
};
</script>

<style lang="scss" module>
.panel {
  background-color: #ffffff;
  border: solid 1px #dddddd;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  margin: -1px;

  .panelHeading {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
    letter-spacing: -0.015em;
  }
}
.bodyPage {
  padding: 5px 20px 20px;
}
.smooth-enter-active,
.smooth-leave-active {
  transition: height 0.5s;
  overflow: hidden;
}
.smooth-enter,
.smooth-leave-to {
  height: 0;
}
</style>

<style scoped>
.panelCollapseIndicator {
  cursor: pointer;
}
</style>
