"use client";

import * as React from "react";
import { useDraggable } from "@dnd-kit/core";
import { DealCard } from "../deal-card";
import type { DraggableCardProps } from "../types";
import { KanbanDragActiveContext } from "./kanban-drag-context";
import { isKanbanCardInteractiveTarget } from "./kanban-card-drop-utils";
import { useKanbanBoardContext } from "./kanban-board-context";

export const DraggableCard = React.memo(
  function DraggableCard({
    deal,
    isAlreadyCustomer,
    disabled,
  }: DraggableCardProps) {
    const isBoardDragging = React.useContext(KanbanDragActiveContext);
    const {
      stages,
      kanbanPermissions,
      canSubject,
      onOpen,
      onEdit,
      onDelete,
      onAssignTask,
      teams,
      timelineIntents,
    } = useKanbanBoardContext();
    const dragData = React.useMemo(
      () => ({ dealId: deal.id, stageId: deal.stage, deal }),
      [deal],
    );
    const { attributes, listeners, setNodeRef, setActivatorNodeRef, isDragging } =
      useDraggable({
        id: deal.id,
        disabled,
        data: dragData,
      });

    const handlePointerDown = React.useCallback(
      (e: React.PointerEvent<HTMLDivElement>) => {
        if (disabled) return;
        if (isKanbanCardInteractiveTarget(e.target)) return;
        const onPointerDown = listeners?.onPointerDown;
        const onMouseDown = listeners?.onMouseDown;
        if (typeof onPointerDown === "function") {
          onPointerDown(e);
        } else if (typeof onMouseDown === "function") {
          onMouseDown(e as unknown as React.MouseEvent<HTMLDivElement>);
        }
      },
      [disabled, listeners],
    );

    const handleKeyDown = React.useCallback(
      (e: React.KeyboardEvent<HTMLDivElement>) => {
        const onKeyDown = listeners?.onKeyDown;
        if (typeof onKeyDown === "function") {
          onKeyDown(e);
        }
      },
      [listeners],
    );

    const kanbanDragListeners = React.useMemo(
      () =>
        disabled
          ? undefined
          : { onPointerDown: handlePointerDown, onKeyDown: handleKeyDown },
      [disabled, handlePointerDown, handleKeyDown],
    );

    return (
      <div
        data-draggable-card
        style={{
          opacity: isBoardDragging && isDragging ? 0.35 : 1,
          willChange: isBoardDragging && isDragging ? "transform" : "auto",
          pointerEvents: isBoardDragging && isDragging ? "none" : "auto",
        }}
        className="w-full max-w-full box-border rounded-xl pb-3"
      >
        <DealCard
          deal={deal}
          stages={stages}
          isAlreadyCustomer={isAlreadyCustomer}
          kanbanPermissions={kanbanPermissions}
          kanbanDraggable={!disabled}
          kanbanNodeRef={
            disabled
              ? undefined
              : (node) => {
                  setNodeRef(node);
                  setActivatorNodeRef(node);
                }
          }
          kanbanDragAttributes={disabled ? undefined : attributes}
          kanbanDragListeners={kanbanDragListeners}
          canSubject={canSubject}
          onOpen={onOpen}
          onEdit={onEdit}
          onDelete={onDelete}
          onAssignTask={onAssignTask}
          teams={teams}
          timelineIntents={timelineIntents}
        />
      </div>
    );
  },
  (prev, next) =>
    prev.deal === next.deal &&
    prev.isAlreadyCustomer === next.isAlreadyCustomer &&
    prev.disabled === next.disabled,
);