"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _base = _interopRequireDefault(require("@emotion/styled/base"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
var _decapCmsUiDefault = require("decap-cms-ui-default");
var _react2 = require("@emotion/react");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const IMAGE_HEIGHT = 160;
const Card = /*#__PURE__*/(0, _base.default)("div", {
  target: "e2etv5a5",
  label: "Card"
})("width:", props => props.width, ";height:", props => props.height, ";margin:", props => props.margin, ";border:", _decapCmsUiDefault.borders.textField, ";border-color:", props => props.isSelected && _decapCmsUiDefault.colors.active, ";border-radius:", _decapCmsUiDefault.lengths.borderRadius, ";cursor:pointer;overflow:hidden;background-color:", props => props.isPrivate && _decapCmsUiDefault.colors.textFieldBorder, ";&:focus{outline:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 4740 characters] */"));
const CardImageWrapper = /*#__PURE__*/(0, _base.default)("div", {
  target: "e2etv5a4",
  label: "CardImageWrapper"
})("height:", IMAGE_HEIGHT + 2, "px;", _decapCmsUiDefault.effects.checkerboard, ";", _decapCmsUiDefault.shadows.inset, ";border-bottom:solid ", _decapCmsUiDefault.lengths.borderWidth, " ", _decapCmsUiDefault.colors.textFieldBorder, ";position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 4744 characters] */"));
const CardImage = /*#__PURE__*/(0, _base.default)("img", {
  target: "e2etv5a3",
  label: "CardImage"
})("width:100%;height:", IMAGE_HEIGHT, "px;object-fit:contain;border-radius:2px 2px 0 0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 4744 characters] */"));
const CardFileIcon = /*#__PURE__*/(0, _base.default)("div", {
  target: "e2etv5a2",
  label: "CardFileIcon"
})(process.env.NODE_ENV === "production" ? {
  name: "viljxp",
  styles: "width:100%;height:160px;object-fit:cover;border-radius:2px 2px 0 0;padding:1em;font-size:3em"
} : {
  name: "viljxp",
  styles: "width:100%;height:160px;object-fit:cover;border-radius:2px 2px 0 0;padding:1em;font-size:3em",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 4744 characters] */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const CardText = /*#__PURE__*/(0, _base.default)("p", {
  target: "e2etv5a1",
  label: "CardText"
})("color:", _decapCmsUiDefault.colors.text, ";padding:8px;margin-top:20px;overflow-wrap:break-word;line-height:1.3!important;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 4744 characters] */"));
const DraftText = /*#__PURE__*/(0, _base.default)("p", {
  target: "e2etv5a0",
  label: "DraftText"
})("color:", _decapCmsUiDefault.colors.mediaDraftText, ";background-color:", _decapCmsUiDefault.colors.mediaDraftBackground, ";position:absolute;padding:8px;border-radius:", _decapCmsUiDefault.lengths.borderRadius, " 0 ", _decapCmsUiDefault.lengths.borderRadius, " 0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 4744 characters] */"));
class MediaLibraryCard extends _react.default.Component {
  render() {
    const {
      isSelected,
      displayURL,
      text,
      onClick,
      draftText,
      width,
      height,
      margin,
      isPrivate,
      type,
      isViewableImage,
      isDraft
    } = this.props;
    const url = displayURL.get('url');
    return (0, _react2.jsx)(Card, {
      isSelected: isSelected,
      onClick: onClick,
      width: width,
      height: height,
      margin: margin,
      tabIndex: "-1",
      isPrivate: isPrivate
    }, (0, _react2.jsx)(CardImageWrapper, null, isDraft ? (0, _react2.jsx)(DraftText, {
      "data-testid": "draft-text"
    }, draftText) : null, url && isViewableImage ? (0, _react2.jsx)(CardImage, {
      loading: "lazy",
      src: url
    }) : (0, _react2.jsx)(CardFileIcon, {
      "data-testid": "card-file-icon"
    }, type)), (0, _react2.jsx)(CardText, null, text));
  }
  componentDidMount() {
    const {
      displayURL,
      loadDisplayURL
    } = this.props;
    if (!displayURL.get('url')) {
      loadDisplayURL();
    }
  }
}
MediaLibraryCard.propTypes = {
  isSelected: _propTypes.default.bool,
  displayURL: _reactImmutableProptypes.default.map.isRequired,
  text: _propTypes.default.string.isRequired,
  onClick: _propTypes.default.func.isRequired,
  draftText: _propTypes.default.string.isRequired,
  width: _propTypes.default.string.isRequired,
  height: _propTypes.default.string.isRequired,
  margin: _propTypes.default.string.isRequired,
  isPrivate: _propTypes.default.bool,
  type: _propTypes.default.string,
  isViewableImage: _propTypes.default.bool.isRequired,
  loadDisplayURL: _propTypes.default.func.isRequired,
  isDraft: _propTypes.default.bool
};
var _default = exports.default = MediaLibraryCard;