"use strict";

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

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

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

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 _contentRendering = require("../../rce/contentRendering");

var _dragHtml = _interopRequireDefault(require("../dragHtml"));

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

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

var _Loading = _interopRequireDefault(require("../../common/components/Loading"));

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

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

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

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

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 FlickrSearch =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FlickrSearch, _Component);

  function FlickrSearch() {
    (0, _classCallCheck2.default)(this, FlickrSearch);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FlickrSearch).apply(this, arguments));
  }

  (0, _createClass2.default)(FlickrSearch, [{
    key: "toggleForm",
    value: function toggleForm(e) {
      e.preventDefault();
      this.props.toggleFlickrForm();
    }
  }, {
    key: "updateSearchTerm",
    value: function updateSearchTerm(e) {
      this.setState({
        searchTerm: e.target.value
      });
    }
  }, {
    key: "handleSubmit",
    value: function handleSubmit(e) {
      e.preventDefault();

      if (this.state && this.state.searchTerm) {
        var term = this.state.searchTerm.trim();

        if (term.length > 0) {
          this.props.flickrSearch(term);
        }
      }
    }
  }, {
    key: "flickrResultClick",
    value: function flickrResultClick(result) {
      this.props.onImageEmbed(result);
    }
  }, {
    key: "flickrResultDrag",
    value: function flickrResultDrag(ev, result) {
      (0, _dragHtml.default)(ev, (0, _contentRendering.renderImage)(result));
    }
  }, {
    key: "renderFlickrResult",
    value: function renderFlickrResult(result) {
      var _this = this;

      return _react.default.createElement("div", {
        key: "flickrPic_" + result.id,
        style: {
          float: "left",
          padding: "2px",
          cursor: "pointer"
        },
        onClick: function onClick() {
          return _this.flickrResultClick(result);
        }
      }, _react.default.createElement("img", {
        onDragStart: function onDragStart(ev) {
          return _this.flickrResultDrag(ev, result);
        },
        src: result.href.replace(".jpg", "_s.jpg"),
        title: "embed " + result.title,
        alt: result.title
      }));
    }
  }, {
    key: "flickrSearchResults",
    value: function flickrSearchResults() {
      if (this.props.flickr.searching) {
        return _react.default.createElement(_Loading.default, null);
      } else if (this.props.flickr.searchResults) {
        return _react.default.createElement("div", {
          style: {
            maxHeight: "400px",
            overflowY: "auto"
          }
        }, this.props.flickr.searchResults.map(this.renderFlickrResult, this));
      }
    }
  }, {
    key: "renderSubmitButton",
    value: function renderSubmitButton() {
      if (this.props.flickr.searching) {
        return null;
      } else {
        return _react.default.createElement("div", {
          className: (0, _aphrodite.css)(styles.searchButtonContainer)
        }, _react.default.createElement(_Button.default, {
          type: "submit"
        }, "Ch\xE8che"));
      }
    }
  }, {
    key: "renderForm",
    value: function renderForm() {
      if (this.props.flickr.formExpanded) {
        return _react.default.createElement("div", null, _react.default.createElement("form", {
          onSubmit: this.handleSubmit.bind(this)
        }, _react.default.createElement("div", {
          className: (0, _aphrodite.css)(styles.titlebar)
        }, _react.default.createElement("span", null, "Flickr: Creative Commons")), _react.default.createElement(_TextInput.default, {
          label: "Ch\xE8che",
          placeholder: "antre t\xE8m rech\xE8ch",
          onChange: this.updateSearchTerm.bind(this)
        }), this.renderSubmitButton()), this.flickrSearchResults());
      }

      return null;
    }
  }, {
    key: "flickrLink",
    value: function flickrLink() {
      var message = this.props.flickr.formExpanded ? "F\xE8men f\xF2mil\xE8 Flickr" : "Ch\xE8che sou Flickr";
      var icon = this.props.flickr.formExpanded ? _react.default.createElement(_IconMinimize.default, {
        className: (0, _aphrodite.css)(styles.icon)
      }) : _react.default.createElement(_IconSearch.default, {
        className: (0, _aphrodite.css)(styles.icon)
      });
      return _react.default.createElement(_Button.default, {
        variant: "link",
        "aria-label": "Ch\xE8che sou Flickr",
        "aria-expanded": this.props.flickr.formExpanded,
        onClick: this.toggleForm.bind(this)
      }, icon, " " + message);
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        className: (0, _aphrodite.css)(styles.container)
      }, this.flickrLink(), _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()));
    }
  }]);
  FlickrSearch.displayName = "FlickrSearch";
  return FlickrSearch;
}(_react.Component);

FlickrSearch.propTypes = {
  flickrSearch: _propTypes.default.func.isRequired,
  toggleFlickrForm: _propTypes.default.func.isRequired,
  flickr: _propTypes.default.shape({
    searchResults: _propTypes.default.arrayOf(_propTypes.default.shape({
      id: _propTypes.default.string.isRequired,
      href: _propTypes.default.string.isRequired,
      title: _propTypes.default.string.isRequired
    })).isRequired,
    searching: _propTypes.default.bool.isRequired,
    formExpanded: _propTypes.default.bool.isRequired
  }).isRequired,
  onImageEmbed: _propTypes.default.func.isRequired
};

var styles = _aphrodite.StyleSheet.create({
  slideDownEnter: {
    maxHeight: 0,
    overflowY: "hidden"
  },
  slideDownEnterActive: {
    maxHeight: "1000px",
    transition: "max-height 500ms ease-in"
  },
  slideDownLeave: {
    maxHeight: "1000px",
    overflowY: "hidden"
  },
  slideDownLeaveActive: {
    maxHeight: 0,
    transition: "max-height 300ms ease-in"
  },
  container: {
    marginTop: "12px"
  },
  searchButtonContainer: {
    marginTop: "5px"
  },
  titlebar: {
    marginTop: "10px",
    fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
    fontSize: "18px"
  },
  icon: {
    verticalAlign: "middle"
  }
});

var _default = FlickrSearch;
exports.default = _default;