"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

let timeout;

const CustomDragSignature = props => {
  const {
    defaultValue,
    onSave,
    isDragable,
    read_only,
    style,
    index
  } = props;

  const [dragStyle, setStyle] = _react.default.useState({});

  dragElement(document.getElementById("mydiv" + index));

  _react.default.useEffect(() => {
    if (typeof window !== 'undefined') {
      setTimeout(() => {
        const mydivHeader = document.getElementById(`mydiv${index}header`);
        console.log(mydivHeader);
        if (mydivHeader) mydivHeader.click();
      }, 300);
    }
  }, [defaultValue]);

  function dragElement(elmnt) {
    if (elmnt) {
      var pos1 = 0,
          pos2 = 0,
          pos3 = 0,
          pos4 = 0;

      if (document.getElementById(elmnt.id + "header")) {
        // if present, the header is where you move the DIV from:
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
      } else if (isDragable) {
        // otherwise, move the DIV from anywhere inside the DIV:
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault(); // get the mouse cursor position at startup:

        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement; // call a function whenever the cursor moves:

        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault(); // calculate the new cursor position:

        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY; // set the element's new position:

        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          setStyle({
            top: elmnt.offsetTop - pos2 + "px",
            left: elmnt.offsetLeft - pos1 + "px"
          });
        }, 500);
      }

      function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
  }

  const onSaveDragable = () => {
    onSave(dragStyle);
  };

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, defaultValue && read_only === false && isDragable ? /*#__PURE__*/_react.default.createElement("div", {
    id: "mydiv" + index,
    className: "mydiv"
  }, /*#__PURE__*/_react.default.createElement("div", {
    id: "mydiv" + index + 'header',
    className: "mydivheader drag-btn",
    tabIndex: "0"
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "fas fa-arrows-alt"
  })), /*#__PURE__*/_react.default.createElement("a", {
    className: "btn float-btn",
    onClick: onSaveDragable
  }, "Save"), /*#__PURE__*/_react.default.createElement("div", null, " ", /*#__PURE__*/_react.default.createElement("img", {
    className: "signature-img",
    src: defaultValue,
    width: 90,
    height: 60
  }), " ")) : /*#__PURE__*/_react.default.createElement("div", {
    id: "mydiv" + index,
    className: "mydiv",
    style: style
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: "signature-img",
    src: defaultValue,
    style: { ...style
    }
  })));
};

CustomDragSignature.propTypes = {
  defaultValue: _propTypes.default.string,
  isDragable: _propTypes.default.bool,
  onSave: _propTypes.default.func,
  read_only: _propTypes.default.bool
};
CustomDragSignature.defaultProps = {
  defaultValue: '',
  isDragable: true,
  read_only: true,
  onSave: () => {}
};
var _default = CustomDragSignature;
exports.default = _default;