"use client";

import type {
	DragEndEvent,
	DragStartEvent,
	UniqueIdentifier,
} from "@dnd-kit/core";
import {
	closestCenter,
	DndContext,
	DragOverlay,
	KeyboardSensor,
	PointerSensor,
	useSensor,
	useSensors,
} from "@dnd-kit/core";
import {
	arrayMove,
	SortableContext,
	sortableKeyboardCoordinates,
} from "@dnd-kit/sortable";
import { backdropClasses } from "@mui/material";
import { type FC, type ReactNode, useCallback, useState } from "react";

export interface ActiveItem {
	id: string | number;
	index: number;
}

interface SortableDndContainerProps<T, K extends { id: UniqueIdentifier }> {
	readonly children: ReactNode;
	readonly DragOverlayComponent: FC<Partial<T>>;
	readonly getDragOverlayProps: (item: ActiveItem) => Partial<T>;
	readonly items: Array<K>;
	readonly onChange: (newArray: Array<K>) => void;
}

PointerSensor.activators[0].handler = ({ nativeEvent }) => {
	const targetElement = nativeEvent.target as HTMLElement;

	if (targetElement.classList.contains(backdropClasses.root)) {
		return false;
	}

	let currentElement = targetElement;

	while (currentElement.parentElement) {
		if (currentElement.dataset?.["noDnd"]) {
			return false;
		}
		currentElement = currentElement.parentElement;
	}

	return !currentElement.dataset?.["noDnd"];
};

const SortableDndContainer = <T, K extends { id: UniqueIdentifier }>({
	children,
	items,
	onChange,
	DragOverlayComponent,
	getDragOverlayProps,
}: SortableDndContainerProps<T, K>) => {
	const [activeItem, setActiveItem] = useState<ActiveItem | null>(null);
	const sensors = useSensors(
		useSensor(PointerSensor, {
			activationConstraint: {
				distance: 1,
			},
		}),
		useSensor(KeyboardSensor, {
			coordinateGetter: sortableKeyboardCoordinates,
		}),
	);

	const handleDragStart = useCallback((event: DragStartEvent) => {
		const {
			active: { id, data },
		} = event;

		setActiveItem({
			id,
			index: data.current?.["sortable"].index,
		});
	}, []);

	const handleDragEnd = useCallback(
		(event: DragEndEvent) => {
			const { active, over } = event;

			if (active.id !== over?.id) {
				const oldIndex = items.findIndex((item) => item.id === active.id);
				const newIndex = items.findIndex((item) => item.id === over?.id);
				const newArray = arrayMove(items, oldIndex, newIndex);
				onChange(newArray);
			}

			setActiveItem(null);
		},
		[onChange, items],
	);
	return (
		<DndContext
			collisionDetection={closestCenter}
			onDragEnd={handleDragEnd}
			onDragStart={handleDragStart}
			sensors={sensors}
		>
			<SortableContext items={items}>{children}</SortableContext>
			<DragOverlay
				style={{
					opacity: 0.5,
					cursor: "grabbing",
				}}
			>
				{activeItem ? (
					<DragOverlayComponent {...getDragOverlayProps(activeItem)} />
				) : null}
			</DragOverlay>
		</DndContext>
	);
};

export default SortableDndContainer;

import type { ActiveItem } from "@riptech/legacy-ui/src/components/DnD/SortableDndContainer";
import SortableDndContainer from "@riptech/legacy-ui/src/components/DnD/SortableDndContainer";