function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import * as React from 'react';
import PropTypes from 'prop-types';
import sanitizeURL from '../sanitizeURL.js';
import { CustomButton, preventEventDefault } from '@modusoperandi/licit-ui-commands';
import { ENTER } from './KeyCodes.js';
import { INNER_LINK } from '../Types.js';
import { Tooltip as ReactTooltip } from 'react-tooltip';
var BAD_CHARACTER_PATTER = /\s/;
var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
  function LinkURLEditor() {
    var _this;
    _classCallCheck(this, LinkURLEditor);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, LinkURLEditor, [].concat(args));
    _defineProperty(_this, "state", {
      url: _this.props.href_,
      TOCselectedNode_: _this.props.TOCselectedNode_,
      selectionId: _this.props.selectionId_
    });
    _defineProperty(_this, "openForm", function (formName) {
      var i;
      var tabcontent = document.getElementsByClassName('tabcontent');
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = 'none';
      }
      var tablinks = document.getElementsByClassName('tablinks');
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove('active');
      }
      var selectedTab = document.getElementById(formName);
      if (selectedTab) {
        selectedTab.style.display = 'block';
      }
      var clickedButton = document.querySelector(".tablinks[data-form=\"".concat(formName, "\"]"));
      if (clickedButton) {
        clickedButton.classList.add('active');
      }
    });
    _defineProperty(_this, "handleOptionChange", function (textContent_, selectionId) {
      var texthash = '';
      var nodeconcat_UUID = texthash.concat(selectionId);
      var textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
      _this.props.close(textContent);
    });
    _defineProperty(_this, "_onKeyDown", function (e) {
      if (e.keyCode === ENTER) {
        e.preventDefault();
        _this._apply();
      }
    });
    _defineProperty(_this, "_onURLChange", function (e) {
      var url = e.target.value;
      _this.setState({
        url: url
      });
    });
    _defineProperty(_this, "_cancel", function () {
      _this.props.close();
    });
    _defineProperty(_this, "_apply", function () {
      var url = _this.state.url;
      if (url && !BAD_CHARACTER_PATTER.test(url)) {
        _this.props.close(sanitizeURL(url));
      }
    });
    return _this;
  }
  _inherits(LinkURLEditor, _React$PureComponent);
  return _createClass(LinkURLEditor, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var selectionId = this.state.selectionId;
      var defaultTab = selectionId ? 'innerlink' : 'webpage';
      var selectedTab = this.props.selectedTab || defaultTab;
      this.openForm(selectedTab);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$state = this.state,
        url = _this$state.url,
        TOCselectedNode_ = _this$state.TOCselectedNode_,
        selectionId = _this$state.selectionId;
      var isTOCValid = function isTOCValid() {
        if (!TOCselectedNode_ || TOCselectedNode_.length === 0) {
          return false;
        }
        return TOCselectedNode_.some(function (item) {
          var _item$content$;
          return (item === null || item === void 0 || (_item$content$ = item.content[0]) === null || _item$content$ === void 0 || (_item$content$ = _item$content$.text) === null || _item$content$ === void 0 ? void 0 : _item$content$.trim()) !== '';
        });
      };
      var isValid = isTOCValid();
      var error = url ? BAD_CHARACTER_PATTER.test(url) : false;
      var label = 'Apply';
      var disabled;
      if (this.props.href) {
        label = url ? 'Apply' : 'Remove';
        disabled = error;
      } else {
        disabled = error || !url;
      }
      return /*#__PURE__*/React.createElement("div", {
        className: "czi-image-url-editor"
      }, /*#__PURE__*/React.createElement("div", {
        className: "czi-form",
        style: {
          padding: '10px',
          display: 'flex'
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "tab"
      }, /*#__PURE__*/React.createElement("button", {
        className: "tablinks",
        "data-form": "webpage",
        onClick: function onClick() {
          return _this2.openForm('webpage');
        }
      }, "Existing Web Page"), /*#__PURE__*/React.createElement("button", {
        className: "tablinks",
        "data-form": "innerlink",
        onClick: function onClick() {
          return _this2.openForm('innerlink');
        }
      }, "Place in this Document")), /*#__PURE__*/React.createElement("div", {
        className: "tabcontent",
        id: "webpage"
      }, /*#__PURE__*/React.createElement("form", {
        onSubmit: preventEventDefault
      }, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("label", null, "Add a Link : "), /*#__PURE__*/React.createElement("input", {
        autoFocus: true,
        onChange: this._onURLChange,
        onKeyDown: this._onKeyDown,
        placeholder: "Paste a URL",
        spellCheck: false,
        type: "text",
        value: selectionId ? null : url
      })), /*#__PURE__*/React.createElement("div", {
        className: "czi-form-buttons"
      }, /*#__PURE__*/React.createElement(CustomButton, {
        label: "Cancel",
        onClick: this._cancel
      }), /*#__PURE__*/React.createElement(CustomButton, {
        active: true,
        disabled: disabled,
        label: label,
        onClick: function onClick() {
          _this2._apply();
        }
      })))), !isValid ? /*#__PURE__*/React.createElement("div", {
        className: "tabcontent",
        id: "innerlink"
      }, /*#__PURE__*/React.createElement("p", null, "No TOC/TOT/TOF styles"), /*#__PURE__*/React.createElement("div", {
        className: "czi-form-buttons"
      }, /*#__PURE__*/React.createElement(CustomButton, {
        label: "Cancel",
        onClick: this._cancel
      }))) : /*#__PURE__*/React.createElement("div", {
        className: "tabcontent",
        id: "innerlink"
      }, /*#__PURE__*/React.createElement("form", {
        action: "#"
      }, /*#__PURE__*/React.createElement("label", null, "Select the Inner Link"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("select", {
        defaultValue: TOCselectedNode_.some(function (res) {
          var _res$content$;
          return (res === null || res === void 0 || (_res$content$ = res.content[0]) === null || _res$content$ === void 0 ? void 0 : _res$content$.text) === url;
        }) ? url : null,
        id: "toc",
        name: "toccontents",
        size: "3"
      }, TOCselectedNode_ === null || TOCselectedNode_ === void 0 ? void 0 : TOCselectedNode_.filter(function (res) {
        var _res$content$2;
        return (res === null || res === void 0 || (_res$content$2 = res.content[0]) === null || _res$content$2 === void 0 || (_res$content$2 = _res$content$2.text) === null || _res$content$2 === void 0 ? void 0 : _res$content$2.trim()) !== '';
      }).map(function (res, index) {
        var _res$content$3, _res$content$5, _res$content$6;
        return /*#__PURE__*/React.createElement("option", {
          "data-tooltip-content": res === null || res === void 0 || (_res$content$3 = res.content[0]) === null || _res$content$3 === void 0 ? void 0 : _res$content$3.text,
          "data-tooltip-id": "select-toc-tooltip",
          key: index,
          onClick: function onClick() {
            var _res$content$4;
            _this2.handleOptionChange(res === null || res === void 0 || (_res$content$4 = res.content[0]) === null || _res$content$4 === void 0 ? void 0 : _res$content$4.text, res === null || res === void 0 ? void 0 : res.attrs.selectionId);
          },
          value: res === null || res === void 0 || (_res$content$5 = res.content[0]) === null || _res$content$5 === void 0 ? void 0 : _res$content$5.text
        }, res === null || res === void 0 || (_res$content$6 = res.content[0]) === null || _res$content$6 === void 0 ? void 0 : _res$content$6.text);
      })), /*#__PURE__*/React.createElement(ReactTooltip, {
        effect: "solid",
        id: "select-toc-tooltip",
        place: "bottom"
      }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
        className: "czi-form-buttons"
      }, /*#__PURE__*/React.createElement(CustomButton, {
        label: "Cancel",
        onClick: this._cancel
      }))))));
    }
  }]);
}(React.PureComponent);
export default LinkURLEditor;