<template>
  <div class="mm-collapse-item">
    <div
      :class="{
        'mm-collapse-item-header-wrap': true,
        'mm-collapse-item-header-wrap--sticky': collapse.sticky && collapse.isSupportSticky
      }">
      <div
        ref="collapseHeader"
        :class="{
          'mm-collapse-item-header--active': isActive,
          'mm-collapse-item-header--disabled': disabled,
          'mm-collapse-item-header--fixed': isFixed,
        }"
        class="mm-collapse-item-header"
        @click="toggle">
        <slot
          name="icon"
          :isActive="isActive">
          <ui-icon
            v-if="showArrow"
            :class="{
              'mm-collapse-item-header-icon--active': isActive,
            }"
            class="mm-collapse-item-header-icon"
            name="switch"
            size="12px"
            fill="#5d5d5d"></ui-icon>
        </slot>
        <slot
          name="title"
          :isActive="isActive">
          {{ title }}
        </slot>
      </div>
    </div>
    <collapse-transition>
      <div
        v-show="isActive"
        class="mm-collapse-item-wrap">
        <div class="mm-collapse-item-content">
          <slot></slot>
        </div>
      </div>
    </collapse-transition>
  </div>
</template>
<script>
import collapseTransition from "../../utils/collapse-transition"
import Icon from "../icon"

import config from "../../managers/config"

config.defaults({
  "CollapseItem.showArrow": true,
})

export default {
  name: "mm-collapse-item",
  components: {
    "ui-icon": Icon,
    collapseTransition,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    name: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    showArrow: {
      type: Boolean,
      default: () => config.get("CollapseItem.showArrow"),
    },
  },
  inject: {
    collapse: {
      from: "mm-collapse",
      default: null,
    },
  },
  data() {
    return {
      index: 0,
      isFixed: false,
    }
  },
  computed: {
    currentName() {
      return this.name || this.index
    },
    isActive() {
      return this.collapse.localValue.indexOf(this.currentName) > -1
    },
  },
  watch: {
    isActive(val) {
      if (!val) {
        this.isFixed = false
      }
    },
  },
  methods: {
    toggle() {
      if (!this.disabled) {
        this.collapse &&
          this.collapse.handleItemClick({
            name: this.currentName,
            isActive: this.isActive,
          })
      }
    },
    updateFixed(scrollTop) {
      if (!this.$el || !this.isActive) {
        this.isFixed = false
        return
      }

      const collapseHeader = this.$refs.collapseHeader
      const { offsetTop, offsetHeight } = this.$el
      const { offsetHeight: headerOffsetHeight } = collapseHeader
      const maxheight = offsetTop + offsetHeight - headerOffsetHeight

      this.isFixed = !!(scrollTop >= offsetTop && scrollTop <= maxheight)
      collapseHeader.style.top = this.isFixed ? `${scrollTop}px` : 0
    },
  },
}
</script>
