<script setup lang="ts">
import { computed, inject, Ref } from "vue";

const dropdownSubOpen = inject<Ref<boolean>>("dropdownSubOpen");
const dropdownSubAlign = inject<Ref<string>>("alignSubDropDown");

if (!dropdownSubOpen) {
  throw new Error("dropdownSubOpen not provided");
}

if (!dropdownSubAlign) {
  throw new Error("dropdownSubAlign not provided");
}

const dynamicSubDirection = computed(() => {
  const alignValue = dropdownSubAlign.value;
  if (alignValue === "right") {
    return "left:100%";
  }
  if (alignValue === "center") {
    return "left: 100%;";
  }
  return "right: 100%;";
});
</script>

<template>
  <Transition>
    <div v-if="dropdownSubOpen" class="gr-drop-sub-content" :style="dynamicSubDirection">
      <slot />
    </div>
  </Transition>
</template>

<style scoped lang="scss">
.gr-drop-sub-content {
  height: min-content;
  user-select: none;
  min-width: min-content;
  position: absolute;
  // left: 100%;
  height: min-content;
  display: flex;
  gap: var(--spacing-1-5);
  flex-direction: column;
  align-items: start;
  border-radius: var(--radius-lg);
  background: var(--gray-white);
  border: 1px solid var(--gray-50);
  box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.05);
  padding: var(--spacing-1) 0 var(--spacing-1) 0;
  width: var(--w-56);
  min-width: var(--w-32);
  position: absolute;
  top: 0;
}
</style>
