"use strict";

exports.__esModule = true;
exports.default = void 0;

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

var _styles = require("@mui/material/styles");

var _reactLazyload = _interopRequireDefault(require("react-lazyload"));

var _Media = require("../../../constants/Media");

var _AutoPlayer = _interopRequireDefault(require("../../AutoPlayer"));

var _CentralProgress = _interopRequireDefault(require("../../CentralProgress"));

var _Box = _interopRequireDefault(require("@mui/material/Box"));

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

const PREFIX = 'SCPreviewMediaLink';
const classes = {
  preview: `${PREFIX}-preview`,
  thumbnail: `${PREFIX}-thumbnail`,
  image: `${PREFIX}-image`,
  snippet: `${PREFIX}-snippet`,
  snippetTitle: `${PREFIX}-snippetTitle`,
  snippetDescription: `${PREFIX}-snippetDescription`
};
const Root = (0, _styles.styled)(_Box.default, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  [`& .${classes.preview}`]: {
    position: 'relative',
    backgroundColor: '#F5F5F5',
    margin: '10px 0px'
  },
  [`& .${classes.thumbnail}`]: {
    maxWidth: 150,
    border: '1px solid #dddddd',
    borderRadius: 4,
    margin: '10px 10px 10px 20px',
    padding: 4,
    float: 'left'
  },
  [`& .${classes.image}`]: {
    width: '100%'
  },
  [`& .${classes.snippet}`]: {
    padding: 10,
    [`& .${classes.snippetTitle}`]: {},
    [`& .${classes.snippetDescription}`]: {
      fontSize: 12
    },
    '& a': {
      fontSize: 13,
      fontStyle: 'italic'
    }
  }
}));

var _default = props => {
  // PROPS
  const {
    medias,
    fullWidth = false,
    adornment = null
  } = props;
  /**
   * Renders link preview
   * @param (link)
   * @param(key)
   */

  const renderPreview = (link, key) => {
    return /*#__PURE__*/_react.default.createElement(_Box.default, {
      className: classes.preview,
      key: key
    }, link.embed.metadata.images.length > 0 && /*#__PURE__*/_react.default.createElement(_Box.default, null, fullWidth ? /*#__PURE__*/_react.default.createElement("img", {
      src: link.embed.metadata.images[0].url,
      className: classes.image
    }) : /*#__PURE__*/_react.default.createElement(_Box.default, {
      className: classes.thumbnail
    }, /*#__PURE__*/_react.default.createElement("img", {
      src: link.embed.metadata.images[0].url,
      className: classes.image
    }))), /*#__PURE__*/_react.default.createElement(_Box.default, {
      className: classes.snippet
    }, /*#__PURE__*/_react.default.createElement("b", {
      className: classes.snippetTitle
    }, link.embed.metadata.title), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", {
      className: classes.snippetDescription
    }, link.embed.metadata.description), /*#__PURE__*/_react.default.createElement("a", {
      href: link.embed.metadata.url,
      target: '_blank'
    }, link.embed.metadata.url)), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        clear: 'both'
      }
    }));
  };
  /**
   * Renders component
   */


  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, medias.length > 0 && /*#__PURE__*/_react.default.createElement(_reactLazyload.default, {
    height: 360,
    placeholder: /*#__PURE__*/_react.default.createElement(_CentralProgress.default, {
      size: 20
    })
  }, /*#__PURE__*/_react.default.createElement(Root, null, adornment, medias.map((l, i) => {
    if (l.embed.metadata && l.embed.metadata.type === _Media.MEDIA_TYPE_VIDEO) {
      return /*#__PURE__*/_react.default.createElement(_AutoPlayer.default, {
        url: l.url,
        width: '100%',
        key: i
      });
    }

    return renderPreview(l, i);
  }))));
};

exports.default = _default;