"use strict";

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const PREFIX = 'SCRichTextEditorMedia';
const classes = {
  root: `${PREFIX}-root`,
  editable: `${PREFIX}-editable`,
  focused: `${PREFIX}-focused`,
  centered: `${PREFIX}-centered`,
  leftAligned: `${PREFIX}-leftAligned`,
  rightAligned: `${PREFIX}-rightAligned`
};
const Root = (0, _styles.styled)('div', {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (_, styles) => styles.root
})(({
  theme
}) => ({
  [`&.${classes.root}`]: {
    margin: '5px 0 1px',
    outline: 'none'
  },
  [`& .${classes.editable}`]: {
    cursor: 'pointer',
    '&:hover': {
      boxShadow: theme.shadows[3]
    }
  },
  [`& .${classes.focused}`]: {
    boxShadow: theme.shadows[3]
  },
  [`&.${classes.centered}`]: {
    textAlign: 'center'
  },
  [`&.${classes.leftAligned}`]: {
    textAlign: 'left'
  },
  [`&.${classes.rightAligned}`]: {
    textAlign: 'right'
  }
}));

const Media = props => {
  const {
    url,
    width,
    height,
    alignment,
    type
  } = props.contentState.getEntity(props.block.getEntityAt(0)).getData();
  const {
    onClick,
    readOnly,
    focusKey
  } = props.blockProps;

  const htmlTag = () => {
    const componentProps = {
      src: url,
      className: (0, _classnames.default)(classes.root, {
        [classes.editable]: !readOnly,
        [classes.focused]: !readOnly && focusKey === props.block.getKey()
      }),
      width: width,
      height: type === 'video' ? 'auto' : height,
      onClick: () => {
        if (readOnly) {
          return;
        }

        onClick(props.block);
      }
    };

    if (!type || type === 'image') {
      return /*#__PURE__*/_react.default.createElement("img", componentProps);
    }

    if (type === 'video') {
      return /*#__PURE__*/_react.default.createElement("video", _extends({}, componentProps, {
        autoPlay: false,
        controls: true
      }));
    }

    return null;
  };

  return /*#__PURE__*/_react.default.createElement(Root, {
    className: (0, _classnames.default)({
      [classes.centered]: alignment === 'center',
      [classes.leftAligned]: alignment === 'left',
      [classes.rightAligned]: alignment === 'right'
    })
  }, htmlTag());
};

var _default = Media;
exports.default = _default;