<script setup lang="ts">
import { computed, inject, provide, ref } from "vue";
import { IProps } from "./props";

const dropdownValue = inject<boolean>("dropdownValue");

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

const props = withDefaults(defineProps<Pick<IProps, "align" | "size">>(), {
  size: "md",
  align: "left",
});

const dynamicDirection = computed(() => {
  if (props.align === "right") {
    return "left:0";
  }
  if (props.align === "center") {
    return "transform: translateX(-50%); left: 50%;";
  }
  return "right:0";
});

provide("sizeDropDown", ref(props.size));
provide("alignSubDropDown", ref(props.align));
</script>

<template>
  <Transition>
    <div v-if="dropdownValue" :class="`size-${props.size}`" class="gr-drop-content" :style="dynamicDirection">
      <slot />
    </div>
  </Transition>
</template>

<style scoped lang="scss">
.gr-drop-content {
  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;
  margin-top: 5px;
  top: 100%;
  right: 0;
  z-index: 99999999;

  &.size-sm {
    width: var(--w-32);
  }

  &.size-md {
    width: var(--w-56);
  }

  &.size-lg {
    width: var(--w-80);
  }
}
</style>
