"use strict";

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

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

var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));

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

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const tabs = ['Auto', 'Draw', 'Load'];

const CustomSignature = props => {
  const {
    onCancel,
    updateSignature
  } = props;

  let canvas = /*#__PURE__*/_react.default.createRef();

  const [activeTab, setActiveTab] = _react.default.useState("Draw");

  let roModalClass = 'modal ro-modal show d-block'; // if (this.state.roPreviewVisible) {
  //     roModalClass += ' show d-block';
  // }

  const pad_props = {}; // pad_props.defaultValue = defaultValue;
  // pad_props.ref = this.canvas;

  pad_props.defaultValue = null;

  pad_props.ref = e => canvas.current = e;

  let baseClasses = "SortableItem rfb-item"; // if (this.props.data.pageBreakBefore) {
  // baseClasses += " alwaysbreak";
  // }
  // if (this.state.hasClicked) {

  baseClasses += " has-clicked"; // }

  const addSignature = () => {
    if (canvas.current) {
      updateSignature(canvas.current.toDataURL());
    }
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: roModalClass,
    id: "preview-dialog"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-dialog"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-content"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-body"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "signature-modal"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "custom-modal-header row justify-content-between"
  }, /*#__PURE__*/_react.default.createElement("ul", {
    className: "nav nav-pills"
  }, tabs.map(tab => /*#__PURE__*/_react.default.createElement("li", {
    className: "nav-item"
  }, /*#__PURE__*/_react.default.createElement("a", {
    className: `nav-link tab ${tab == activeTab ? 'active' : ''}`,
    "aria-current": "page",
    onClick: () => {
      setActiveTab(tab);
    }
  }, tab)))), /*#__PURE__*/_react.default.createElement("span", {
    className: "tab"
  }, "Create Signature")), /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClasses} mt-3 p-3 text-center`,
    style: {
      background: '#f5f5f5'
    }
  }, /*#__PURE__*/_react.default.createElement(_reactSignatureCanvas.default, _extends({
    penColor: "black",
    backgroundColor: "#ffffff"
  }, pad_props))), /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-3"
  }, /*#__PURE__*/_react.default.createElement("button", {
    type: "button",
    className: "btn btn-primary",
    onClick: addSignature
  }, "Adopt and Sign"), /*#__PURE__*/_react.default.createElement("button", {
    type: "button",
    className: "btn btn-secondary ml-3",
    onClick: onCancel
  }, "Cancel")))))));
};

CustomSignature.propTypes = {
  onCancel: _propTypes.default
};
CustomSignature.defaultProps = {
  onCancel: () => {},
  updateSignature: () => {}
};
var _default = CustomSignature;
exports.default = _default;