import React__default from 'react';
import { createPortal } from 'react-dom';
import Avatar from '../../ui/Avatar.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4372fcec.js';
import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
import { M as MODAL_ROOT } from '../../index-896545a0.js';
import { x as isSupportedFileView, y as isVideo, z as isImage } from '../../index-eefb44ba.js';
import useSendbirdStateContext from '../../useSendbirdStateContext.js';
import { u as useChannelContext } from '../../ChannelProvider-498954bf.js';
import '../../ui/ImageRenderer.js';
import '../../uuid-a79b5ba8.js';
import 'prop-types';
import '../../stringSet-eefbc798.js';
import '../../_rollupPluginBabelHelpers-4f8ebde4.js';
import '../../utils/message/getOutgoingMessageState.js';
import '../../withSendbird.js';
import '../../UserProfileContext-d5787c95.js';
import '../../const-97fac210.js';
import '../../index-2dc53ac2.js';
import '../../index-67135027.js';
import '../../topics-f3629ea0.js';
import '../../compareIds-7800035f.js';
import '@sendbird/chat/groupChannel';
import '@sendbird/chat/message';
import '../../consts-33537265.js';
import '../../resolvedReplyType-e00d5fd9.js';

const FileViewerComponent = _ref => {
  let {
    // sender
    profileUrl,
    nickname,
    // file
    name,
    type,
    url,
    // others
    isByMe,
    onCancel,
    onDelete,
    disableDelete
  } = _ref;
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header__left"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header__left__avatar"
  }, /*#__PURE__*/React__default.createElement(Avatar, {
    height: "32px",
    width: "32px",
    src: profileUrl
  })), /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-fileviewer__header__left__filename",
    type: LabelTypography.H_2,
    color: LabelColors.ONBACKGROUND_1
  }, name), /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-fileviewer__header__left__sender-name",
    type: LabelTypography.BODY_1,
    color: LabelColors.ONBACKGROUND_2
  }, nickname)), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header__right"
  }, isSupportedFileView(type) && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header__right__actions"
  }, /*#__PURE__*/React__default.createElement("a", {
    className: "sendbird-fileviewer__header__right__actions__download",
    rel: "noopener noreferrer",
    href: url,
    target: "_blank"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.DOWNLOAD,
    fillColor: IconColors.ON_BACKGROUND_1,
    height: "24px",
    width: "24px"
  })), onDelete && isByMe && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header__right__actions__delete"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    className: disableDelete ? 'disabled' : '',
    type: IconTypes.DELETE,
    fillColor: disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1,
    height: "24px",
    width: "24px",
    onClick: () => {
      if (!disableDelete) {
        onDelete();
      }
    }
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__header__right__actions__close"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.CLOSE,
    fillColor: IconColors.ON_BACKGROUND_1,
    height: "24px",
    width: "24px",
    onClick: onCancel
  })))), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__content"
  }, isVideo(type) && /*#__PURE__*/React__default.createElement("video", {
    controls: true,
    className: "sendbird-fileviewer__content__video"
  }, /*#__PURE__*/React__default.createElement("source", {
    src: url,
    type: type
  })), isImage(type) && /*#__PURE__*/React__default.createElement("img", {
    src: url,
    alt: name,
    className: "sendbird-fileviewer__content__img"
  }), !isSupportedFileView(type) && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-fileviewer__content__unsupported"
  }, /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.H_1,
    color: LabelColors.ONBACKGROUND_1
  }, "Unsupoprted message"))));
};
const FileViewer = _ref2 => {
  var _useSendbirdStateCont, _useSendbirdStateCont2, _message$sender;
  let {
    onCancel,
    message
  } = _ref2;
  const {
    deleteMessage
  } = useChannelContext();
  const {
    sender,
    type,
    url,
    name = '',
    threadInfo
  } = message;
  const user = (_useSendbirdStateCont = useSendbirdStateContext()) === null || _useSendbirdStateCont === void 0 ? void 0 : (_useSendbirdStateCont2 = _useSendbirdStateCont.config) === null || _useSendbirdStateCont2 === void 0 ? void 0 : _useSendbirdStateCont2.userId;
  const isByMe = user === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
  const disableDelete = (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0;
  const {
    profileUrl,
    nickname = ''
  } = sender;
  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(FileViewerComponent, {
    profileUrl: profileUrl,
    nickname: nickname,
    type: type,
    url: url,
    name: name,
    onCancel: onCancel,
    onDelete: () => {
      deleteMessage(message).then(() => {
        onCancel();
      });
    },
    isByMe: isByMe,
    disableDelete: disableDelete
  }), document.getElementById(MODAL_ROOT));
};

export { FileViewerComponent, FileViewer as default };
//# sourceMappingURL=FileViewer.js.map
