"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

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

var _CSSTransitionGroup = _interopRequireDefault(require("react-transition-group/CSSTransitionGroup"));

var _formatMessage = _interopRequireDefault(require("../../format-message"));

var _Button = _interopRequireDefault(require("@instructure/ui-buttons/lib/components/Button"));

var _TextInput = _interopRequireDefault(require("@instructure/ui-forms/lib/components/TextInput"));

var _IconAdd = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconAdd"));

var _scroll = _interopRequireDefault(require("../../common/scroll"));

var _aphrodite = require("aphrodite");

/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
var LinkToNewPage =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(LinkToNewPage, _Component);

  function LinkToNewPage() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, LinkToNewPage);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf2.default)(LinkToNewPage)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleLinkClick = function (e, link) {
      if (_this.props.onLinkClick) {
        e.preventDefault();

        _this.props.onLinkClick(link);
      }
    };

    return _this;
  }

  (0, _createClass2.default)(LinkToNewPage, [{
    key: "validScrollTarget",
    value: function validScrollTarget(target, parents) {
      return parents.scrolled < 1 && ( //only want to scroll 1 parent
      target === window || // top window passes // as does scrollable items
      // the style check(s) is to determine if it's potentially scrollable
      target.style && target.style.overflow === "auto");
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.props.newPageLinkExpanded && this.pageInput) {
        var formElem = this.pageInput.parentElement && this.pageInput.parentElement.parentElement ? this.pageInput.parentElement.parentElement : null;
        this.pageInput.focus();

        if (formElem) {
          // second param is config param for 'scroll-into-view' module
          _scroll.default.scrollIntoViewWDelay(formElem, {
            time: 100,
            // length of time for animating the scroll
            validTarget: this.validScrollTarget,
            align: {
              top: 0.75
            }
          });
        }
      }
    }
  }, {
    key: "toggleForm",
    value: function toggleForm(e) {
      e.preventDefault();
      this.props.toggleNewPageForm();
    }
  }, {
    key: "isGroup",
    value: function isGroup() {
      if (this.props.contextType === "group") {
        return true;
      }

      return false;
    }
  }, {
    key: "getContextHref",
    value: function getContextHref() {
      var href = "/";

      if (this.isGroup()) {
        href += "groups/";
      } else {
        href += "courses/";
      }

      href += this.props.contextId + "/";
      href += "pages/";
      return href;
    }
  }, {
    key: "handleSubmit",
    value: function handleSubmit(e) {
      e.preventDefault();

      if (this.state && this.state.newPageTitle) {
        var newPageTitle = this.state.newPageTitle.trim();
        var newPageHref = this.getContextHref() + encodeURIComponent(newPageTitle) + "?titleize=0";
        this.handleLinkClick(e, {
          href: newPageHref,
          title: newPageTitle
        });
        this.props.toggleNewPageForm();
      }
    }
  }, {
    key: "updateNewPageTitle",
    value: function updateNewPageTitle(e) {
      this.setState((0, _objectSpread2.default)({}, this.state, {
        newPageTitle: e.target.value
      }));
    }
  }, {
    key: "renderForm",
    value: function renderForm() {
      var _this2 = this;

      if (this.props.newPageLinkExpanded) {
        return _react.default.createElement("form", {
          id: "new_page_drop_down",
          style: {
            margin: "5px"
          },
          "aria-expanded": this.props.newPageLinkExpanded,
          onSubmit: this.handleSubmit.bind(this)
        }, _react.default.createElement(_TextInput.default, {
          id: "new-page-name-input",
          label: "Voc\xEA gostaria de chamar a nova p\xE1gina?",
          onChange: this.updateNewPageTitle.bind(this),
          ref: function ref(input) {
            return _this2.pageInput = input ? input._input : null;
          },
          size: "small"
        }), _react.default.createElement(_Button.default, {
          size: "small",
          id: "rcs-LinkToNewPage-submit",
          type: "submit"
        }, "Inserir link"));
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      return _react.default.createElement("div", {
        className: (0, _aphrodite.css)(styles.container)
      }, _react.default.createElement(_Button.default, {
        size: "small",
        id: "rcs-LinkToNewPage-btn-link",
        type: "button",
        variant: "link",
        onClick: function onClick(e) {
          return _this3.toggleForm(e);
        }
      }, _react.default.createElement(_IconAdd.default, {
        className: (0, _aphrodite.css)(styles.icon)
      }), "\xA0", "Link para uma nova p\xE1gina"), _react.default.createElement(_CSSTransitionGroup.default, {
        transitionName: {
          enter: (0, _aphrodite.css)(styles.slideDownEnter),
          enterActive: (0, _aphrodite.css)(styles.slideDownEnter, styles.slideDownEnterActive),
          leave: (0, _aphrodite.css)(styles.slideDownLeave),
          leaveActive: (0, _aphrodite.css)(styles.slideDownLeave, styles.slideDownLeaveActive)
        },
        transitionEnterTimeout: 500,
        transitionLeaveTimeout: 300
      }, this.renderForm()));
    }
  }]);
  LinkToNewPage.displayName = "LinkToNewPage";
  return LinkToNewPage;
}(_react.Component);

LinkToNewPage.propTypes = {
  onLinkClick: _propTypes.default.func,
  toggleNewPageForm: _propTypes.default.func.isRequired,
  newPageLinkExpanded: _propTypes.default.bool,
  contextId: _propTypes.default.string.isRequired,
  contextType: _propTypes.default.string.isRequired
};

var styles = _aphrodite.StyleSheet.create({
  slideDownEnter: {
    maxHeight: 0,
    overflowY: "hidden"
  },
  slideDownEnterActive: {
    maxHeight: "500px",
    transition: "max-height 500ms ease-in"
  },
  slideDownLeave: {
    maxHeight: "500px",
    overflowY: "hidden"
  },
  slideDownLeaveActive: {
    maxHeight: 0,
    transition: "max-height 300ms ease-in"
  },
  container: {
    marginTop: "5px"
  },
  icon: {
    verticalAlign: "middle"
  }
});

exports.styles = styles;
var _default = LinkToNewPage;
exports.default = _default;