import React from "react";
import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core";
import DealCard from "@/app/deals/components/DealCard/DealCard";
import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import { DealSchema, StatusSchema } from "@/client";

type Props = {
    activeDeal: DealSchema | null;
    activeStatus: StatusSchema | null;
};

const DndOverlay = ({ activeStatus, activeDeal }: Props) => {
    const { deals } = useStatusesContext();

    return (
        <DragOverlay dropAnimation={defaultDropAnimation}>
            <div style={{ cursor: "grabbing" }}>
                {activeDeal ? (
                    <DealCard deal={activeDeal} />
                ) : activeStatus ? (
                    <StatusColumn
                        id={`${activeStatus.id}-status`}
                        status={activeStatus}
                        deals={deals.filter(
                            deal => deal.statusId === activeStatus.id
                        )}
                        isDragging
                    />
                ) : null}
            </div>
        </DragOverlay>
    );
};

export default DndOverlay;
