<template>
  <box :variant="variant" @click="(isCollapsable && isCollapsed) ? toggleCollapse() : null"
       :class="{ 'collapsible': isCollapsable && isCollapsed }" :stretch-content="stretchContent">
    <div>
      <div
          class="box-header"
          :class="{ 'collapsible': isCollapsable, 'box-header--size-l': size === 'l', 'box-header--size-m': size === 'm' }"
      >
        <button
            v-if="isCollapsable"
            class="collapse-button"
            @click.stop="isCollapsable  ? toggleCollapse() : null"
        >
          <PhCaretDown :size="12" :class="{ 'rotated': isCollapsed }"/>
        </button>
        <span @click.stop="isCollapsable  ? toggleCollapse() : null">{{ title }}</span>

      </div>
      <div class="box-content" :class="{ 'collapsed': isCollapsed }">
        <slot></slot>
      </div>
    </div>
  </box>
</template>

<script>
import Box from "@/components/UI/Box.vue";
import {PhCaretDown} from "@phosphor-icons/vue";

export default {
  name: "CollapsibleBox",
  components: {PhCaretDown, Box},
  emits: ['collapsed'],
  props: {
    title: {
      type: String,
      required: true
    },
    size: {
      type: String,
      required: false,
      default: 'l',
      validator: (value) => ['l', 'm'].includes(value)
    },
    variant: {
      type: String,
      required: false,
      default: 'shadow',
      validator: (value) => ['shadow', 'border'].includes(value)
    },
    isCollapsable: {
      type: Boolean,
      required: false,
      default: true
    },
    initiallyCollapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    stretchContent: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      isCollapsed: this.initiallyCollapsed
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
      this.$emit('collapsed', this.isCollapsed);
    }
  }
};
</script>

<style scoped>
.box-header {
  font-weight: 500;
  display: flex;
  justify-content: flex-start;
  gap: 0.8rem;
  align-items: center;
  color: #001D33;
}

.box-header--size-l {
  font-size: 1.6rem;
}

.box-header--size-m {
  font-size: 1.4rem;
}

.collapsible {
  cursor: pointer;
  user-select: none;
}

.collapse-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.collapse-button svg {
  transition: transform 0.2s ease;
}

.collapse-button svg.rotated {
  transform: rotate(-90deg);
}

.box-content {

  transition: all 0.3s ease;
  max-height: 1000px; /* Adjust based on your content */
  opacity: 1;
  width: 100%; /* Füge dies hinzu */
  flex: 1; /* Füge dies hinzu */
}

.box-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style>