import * as attributes from "../data-attributes";
import isElement from "../is-type-of-element/is-element";
import isHtmlElement from "../is-type-of-element/is-html-element";
import closest from "./closest";
import { warning } from "../../dev-warning";

function getSelector(contextId) {
  return `[${attributes.dragHandle.contextId}="${contextId}"]`;
}

export function findClosestDragHandleFromEvent(contextId, event) {
  const target = event.target;
  if (!isElement(target)) {
    warning("event.target must be a Element");
    return null;
  }
  const selector = getSelector(contextId);
  const handle = closest(target, selector);
  if (!handle) {
    return null;
  }
  if (!isHtmlElement(handle)) {
    warning("drag handle must be a HTMLElement");
    return null;
  }
  return handle;
}

export default function tryGetClosestDraggableIdFromEvent(contextId, event) {
  const handle = findClosestDragHandleFromEvent(contextId, event);
  if (!handle) {
    return null;
  }
  return handle.getAttribute(attributes.dragHandle.draggableId);
}
