<template>
  <div class="hn-partial-collapse">
    <div @click="$emit('update:isActive', !isActive)">
      <div class="hn-partial-collapse__title">
        <slot name="title" />
      </div>
      <i
        :class="[
          'hn-partial-collapse__arrow',
          'hn-icon-arrow-right',
          isActive && 'is-active',
        ]"
        :style="collapseArrowStyle" />
    </div>
    <hn-collapse-transition v-if="!minHeight">
      <div
        v-show="isActive"
        class="hn-partial-collapse__content">
        <slot />
      </div>
    </hn-collapse-transition>
    <div
      v-else
      class="hn-partial-collapse__content--height"
      :style="collapseContentWrapHeightStyle">
      <slot />
    </div>
  </div>
</template>

<script>
  import HNCollapseTransition from 'heiner-ui/src/transitions/collapse-transition';

  export default {
    name: 'HnPartialCollapse',
    components: {
      HNCollapseTransition
    },
    props: {
      isActive: {
        type: Boolean,
        default: true
      },
      minHeight: {
        type: Number,
        default: 0
      },
      collapseArrowStyle: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {};
    },
    computed: {
      collapseContentWrapHeightStyle() {
        if (this.isActive) {
          return {
            'max-height': '800px'
          };
        }
        return {
          'max-height': `${this.minHeight}px`
        };
      }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {}
  };
</script>
