<template>
  <div class="expansion-panel">
    <div :id="`header-${expandId}`" class="expand-header" @click="clickExpand()">
      <slot name="header" />
    </div>
    <div 
      class="expand-content" 
      :style="{maxHeight: expand ? expandHeight : 0}"
    >
      <div :id="expandId" class="expand-item">
        <slot name="content" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    expandId: {
      type: [String],
      default: "",
      required: true
    },
    modelValue: {
      type: [Boolean],
      default: false
    },
    resizeLoad: {
      type: [Boolean],
      default: false
    }
  },
  watch: {
    modelValue(newVal) {
      this.expand = newVal
    },
    resizeLoad(newVal) {
      if (newVal) {
        this.activeHeight()
      }
    },
    expand(newVal) {
      this.activeHeight()
    }
  },
  data() {
    return {
      expand: false,
      isMounted: false,
      expandHeight: 0
    }
  },
  mounted() {
    if (Boolean(this.modelValue)) {
      this.expand = !this.expand
      let getElementHeader = document.getElementById("header-"+this.expandId)
      if (getElementHeader.getElementsByTagName("svg").length != 0) {
        getElementHeader.getElementsByTagName("svg")[0].style.transform = this.expand ? "rotate(180deg)" : "rotate(0deg)"
      }
    }
    setTimeout(() => {
      this.activeHeight()
    }, 100);
  },
  methods: {
    activeHeight() {
      if (document.getElementById(this.expandId)) {
        this.expandHeight = `${document.getElementById(this.expandId).clientHeight+100}px`
      } else {
        this.expandHeight = 0
      }
    },
    clickExpand() {
      this.expand = !this.expand
      let getElementHeader = document.getElementById("header-"+this.expandId)
      if (getElementHeader.getElementsByTagName("svg").length != 0) {
        getElementHeader.getElementsByTagName("svg")[0].style.transform = this.expand ? "rotate(180deg)" : "rotate(0deg)"
      }
      this.$emit("update:modelValue", !this.modelValue)
    }
  },
}
</script>

<style lang="scss">
  .expansion-panel {
    .expand-content {
      transition: all .3s;
      max-height: 0px;
      overflow: hidden;
    }

    .expand-header {
      cursor: pointer;
      border-bottom: 1px solid #3e7dc0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>