"use strict";

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

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

var _material = require("@mui/material");

var _reactIntl = require("react-intl");

var _reactSortablejs = require("react-sortablejs");

var _Icon = _interopRequireDefault(require("@mui/material/Icon"));

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

var _PreviewComponent = _interopRequireDefault(require("./PreviewComponent"));

var _UrlTextField = _interopRequireDefault(require("./UrlTextField"));

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

const PREFIX = 'SCMediaActionLink';
const classes = {
  link: `${PREFIX}-link`,
  close: `${PREFIX}-close`
};
const Root = (0, _styles.styled)(_material.Box, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  padding: theme.spacing(),
  [`& .${classes.link}`]: {
    position: 'relative'
  },
  [`& .${classes.close}`]: {
    position: 'absolute',
    right: 0,
    top: 0,
    margin: theme.spacing()
  }
}));

var _default = props => {
  // PROPS
  const {
    medias = [],
    onSuccess,
    onSort,
    onDelete
  } = props;
  /**
   * Renders root object
   */

  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_UrlTextField.default, {
    id: "page",
    name: "page",
    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: "ui.composer.media.link.add.label",
      defaultMessage: "ui.composer.media.link.add.label"
    }),
    fullWidth: true,
    variant: "outlined",
    placeholder: "https://",
    onSuccess: onSuccess
  }), medias.length > 0 && /*#__PURE__*/_react.default.createElement(_reactSortablejs.ReactSortable, {
    list: medias,
    setList: onSort
  }, medias.map(media => /*#__PURE__*/_react.default.createElement(_material.Box, {
    key: media.id,
    m: 1,
    className: classes.link
  }, /*#__PURE__*/_react.default.createElement(_PreviewComponent.default, {
    medias: [media]
  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.close
  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
    onClick: onDelete(media.id),
    size: "small"
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, null, "delete")))))));
};

exports.default = _default;