import { createContext } from 'radix-vue';
import {
	type Ref,
	type Slot,
	type SlotsType,
	computed,
	defineComponent,
	onUnmounted,
	shallowRef,
	toRef,
} from 'vue';

const [inject, provide] = createContext<{
	held: Ref<Ref<Slot | undefined>[]>;
}>('DrawerPortal');

export const Root = defineComponent({
	inheritAttrs: false,
	slots: Object as SlotsType<{
		default(props: { open: boolean }): unknown;
	}>,
	setup(_props, { slots }) {
		const { held } = provide({
			held: shallowRef([]),
		});

		const isOpen = computed(() => held.value.length > 0);

		return () => {
			return slots.default({ open: isOpen.value });
		};
	},
});

export const useIsPortalOpen = (): Ref<boolean> => {
	const context = inject(null);
	if (!context) {
		return toRef(() => false);
	}

	const { held } = context;
	const isOpen = computed(() => held.value.length > 0);

	return isOpen;
};

export const Outlet = defineComponent({
	inheritAttrs: false,
	setup(_props) {
		const { held } = inject();
		const top = computed(() => held.value.at(0));

		return () => {
			const container = top.value;
			if (container !== undefined) {
				const slot = container.value;
				return slot?.();
			}
		};
	},
});

export const Content = defineComponent({
	inheritAttrs: false,
	setup(_props, { slots }) {
		const { held } = inject();

		const container = shallowRef<Slot>();

		held.value = [...held.value, container];
		onUnmounted(() => {
			held.value = held.value.filter((c) => c !== container);
		});

		return () => {
			container.value = slots.default;
			return undefined;
		};
	},
});