<template>
  <li
    class="accordion__item"
    :class="{ accordion__item_active: visible || displayCollapse }"
  >
    <div
      :class="[
        { accordion__trigger_active: visible || displayCollapse },
        disabled ? 'accordion__trigger--disabled' : 'accordion__trigger',
      ]"
      @click="visible || displayCollapse ? close() : open()"
    >
      <!-- This slot will handle the title/header of the accordion and is the part you click on -->
      <slot name="accordion-trigger" />
      <slot
        v-if="hasTriggerIconSlot"
        name="accordion-trigger-icon"
      />
      <l-icon
        v-else
        class="accordion__trigger-icon"
        size="3"
        type="neutral"
        shade="200"
      >
        <icon-tri-down />
      </l-icon>
    </div>

    <transition
      name="accordion"
      @enter="start"
      @after-enter="end"
      @before-leave="start"
      @after-leave="end"
    >
      <div
        v-show="multiple ? displayCollapse : visible"
        class="accordion__content"
      >
        <!-- This slot will handle all the content that is passed to the accordion -->
        <slot name="accordion-content" />
      </div>
    </transition>
  </li>
</template>

<script>
import LIcon from "../atoms/LIcon.vue";
import IconTriDown from "../../icons/icon-tri-down.vue";
export default {
  components: {
    LIcon,
    IconTriDown,
  },
  props: {
    /**
     * If set to `true`, multiple panels can be opened at once.
     */
    multiple: {
      type: Boolean,
    },
    /**
     * If set to `true`, the panel will be disabled and cannot be opened.
     */
    disabled: {
      type: Boolean,
    },
    /**
     * If set to `true`, the panel will be open on page render.
     */
    isOpen: {
      type: Boolean,
    },
  },
  inject: ["Accordion"],
  data() {
    return {
      index: null,
      displayCollapse: false,
    };
  },
  computed: {
    visible() {
      if (!this.disabled) {
        return !this.multiple
          ? this.index == this.Accordion.active
          : this.index == null;
      } else {
        return this.index == null;
      }
    },
    hasTriggerIconSlot() {
      return !!this.$slots["accordion-trigger-icon"];
    },
  },
  watch: {
    "isOpen": {
      handler() {
        if(this.isOpen) {
          this.open()
        }
        else {
          this.close()
        }
      }
    }
  },
  mounted() {
    if(this.isOpen) {
     this.open()
    }
  },
  created() {
    this.index = this.Accordion.count++;
  },
  methods: {
    open() {
      if (!this.disabled) {
        !this.multiple
          ? (this.Accordion.active = this.index)
          : (this.displayCollapse = true);
          this.$emit("click");
      }
    },
    close() {
      if (!this.disabled) {
        !this.multiple
          ? (this.Accordion.active = null)
          : (this.displayCollapse = false);
          this.$emit("click");
      }
    },
    start(el) {
      el.style.height = el.scrollHeight + "px";
    },
    end(el) {
      el.style.height = "";
    },
  },
};
</script>

<style>
.accordion__item {
  border-bottom: 1px solid var(--neutral-50);
  position: relative;
  padding: var(--spacing-2) var(--spacing-4);
  transition: all var(--duration-150) ease-in-out;
}
.accordion__item:hover:not(.accordion__item_active),
.accordion__item:focus:not(.accordion__item_active) {
  background-color: var(--neutral-50);
}

.accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--sizing-lg);
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  cursor: pointer;
}
.accordion__trigger-icon {
  transition: all var(--duration-300) ease-in-out;
}

.accordion__trigger_active .accordion__trigger-icon {
  transform: rotate(180deg);
}

/* Disabled */
.accordion__trigger--disabled {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--sizing-lg);
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  opacity: 0.45;
}

.accordion-enter-active,
.accordion-leave-active {
  will-change: height, opacity;
  transition: height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.accordion-enter,
.accordion-leave-to {
  height: 0 !important;
  opacity: 0;
}
</style>
