fileReactDnd

import React, { useState, useRef } from "react";
import PropTypes from "prop-types";
import { useDrag, useDrop, DragSource, DropTarget } from "react-dnd";

import ItemTypes from "../../../../constants/ItemTypes";
import QuestionForm from "./QuestionForm";
import QuestionDetails from "./QuestionDetails";

/**
 * Implements the drag source contract.
 */

const QuestionGroupItem = ({
  editQuestion,
  activated,
  groupId,
  type,
  name,
  id,
  deleteQuestion,
  copyQuestion,
  activateItem,
  question,
  diagnosticId,
}) => {
  const [stopPropagation, setStopPropagation] = useState(false);


  ////////////////////////////////////////////////////////
  ////  DRAG ////
  ///////////////////////////////////////////////////////

  const [, drag] = useDrag({
    item: {
      type: ItemTypes.QUESTION,
    },
    beginDrag() {
      return {
        id: id,
        groupId: groupId,
      };
    },

    endDrag(monitor) {
      const dropResult = monitor.getDropResult();
      if (!dropResult || !dropResult.id) return;
      const draggedId = monitor.getItem().id;
      const draggedGId = monitor.getItem().groupId;
      if (draggedGId !== dropResult.id) {
        props.changeQuestionGroup(draggedGId, draggedId, dropResult.id);
      }
    },
    collect: (monitor) => ({
      opacity: monitor.isDragging() ? 0.5 : 1,
    }),
  });

  ////////////////////////////////////////////////////////
  ////  DROP ////
  ///////////////////////////////////////////////////////
  const [, drop] = useDrop({
    accept: [ItemTypes.QUESTION, ItemTypes.CONTROL],
    hover(monitor) {
      if (monitor.type !== ItemTypes.QUESTION) return;
      const draggedId = monitor.getItem().id;
      const draggedGId = monitor.getItem().groupId;
      if (draggedId !== id && draggedGId === groupId) {
        moveQuestion(draggedGId, draggedId, id);
      }
    },

    canDrop(monitor) {
      if (monitor.type === ItemTypes.QUESTION) {
        const draggedGId = monitor.getItem().groupId;
        return draggedGId === groupId;
      } else if (monitor.type() === ItemTypes.CONTROL) {
        return monitor.isOver() && monitor.getItem().type !== "advice";
      }
    },

    drop(monitor) {
      if (monitor.type() === ItemTypes.CONTROL) {
        return {
          id: groupId,
          position: id,
        };
      }
    },
  });

  const ref = useRef(null);
  drop(drag(ref));

  const displaySetting = (display) => {
    return display === undefined ? "one-col" : display;
  };

  const handleClick = (e, id) => {
    e.stopPropagation();
    if (!stopPropagation) {
      activateItem(id);
    }
  };

  const handleClickCopy = (e) => {
    e.stopPropagation();
    setStopPropagation(true);
    copyQuestion(id, groupId);
    setTimeout(() => {
      setStopPropagation(false);
    }, 300);
  };

  let element;

  if (activated) {
    element = <QuestionForm question={question} diagnosticId={diagnosticId} />;
  } else {
    element = (
      <li ref={ref} className="question-group-item display-flex">
        <QuestionDetails
          id={id}
          name={name}
          type={type}
          handleClick={(e) => handleClick(e)}
          editQuestion={editQuestion}
        >
          <button title="Dupliquer" className="bt-action" onClick={(e) => handleClickCopy(e)}>
            <span className="bt-action-icon bt-action-duplicate2"></span>
          </button>
          <button
            title="Supprimer"
            className="bt-action"
            onClick={() => {
              if (confirm("Êtes-vous sûr de vouloir supprimer cet élément ?"))
                deleteQuestion(id, groupId);
            }}
          >
            <span className="bt-action-icon bt-action-erase2"></span>
          </button>
        </QuestionDetails>
      </li>
    );
  }

  return element;
};

export default QuestionGroupItem;