import React__default, { useState, useMemo, useContext, useEffect, createContext, useRef } from 'react';
import { B as Button } from './index-96c62ad5.js';
import { H as Heading } from './index-afe90ec2.js';
import { T as Text } from './index-d0a1200e.js';
import { c as safeEncodeURI, M as MediaQueries, t as toggleNoScroll, a as getPopupWrapperDom } from './utils-32d7d5af.js';
import * as ReactDOM from 'react-dom';
import { e as callApiWithAuth, f as getApiPath, T as TogetherComponentGlobalContext } from './utils-f5ed68ed.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { a as __awaiter } from './tslib.es6-ab63fd84.js';
import { I as Input } from './index-d9b5d0ac.js';
import { u as useTranslations } from './index-960c3169.js';
import { g as formatComment } from './dataTransform-35304d21.js';
import { M as MAX_IMAGE_UPLOADS, D as DEFAULT_AVATAR_IMG } from './constants-67be5c94.js';
import { PATHS } from './togetherApiPaths.js';
import { j as removeBannedWordWrapper, i as getMentionIdsFromString, k as encodePostContent, u as uploadAndGetSrc } from './post-501cfac5.js';
import { C as CardLink } from './index-5aaa75e5.js';
import { L as Loading } from './index-4b48e440.js';
import { U as UserAvatar } from './index-aebd61a9.js';
import { R as RichTextEditor } from './editor-d65cf4d0.js';
import { Portal } from '@mantine/core';
import { FullScreen } from '@hhgtech/icons/other';
import { P as Popup } from './index-c8f5f257.js';
import { C as CloseIcon } from './index-8bba0d7a.js';
import { ShareBox } from './togetherShareBox.js';

const useImagePicker = (imageFilesProp, onImageFilesChange) => {
    const [imageFiles, setImageFiles] = useState(imageFilesProp || []);
    const imageSrcs = useMemo(() => (imageFilesProp || imageFiles).map((file) => typeof file === 'string' ? file : URL.createObjectURL(file)), [imageFilesProp, imageFiles]);
    const onSelectImages = (e) => {
        const files = e.target.files;
        if (files) {
            if (onImageFilesChange && imageFilesProp) {
                const _files = imageFilesProp || imageFiles;
                onImageFilesChange(_files.concat(Array.from(files)));
            }
            else
                setImageFiles((imgs) => {
                    const _imgs = imageFilesProp || imgs;
                    onImageFilesChange &&
                        onImageFilesChange(_imgs.concat(Array.from(files)));
                    return _imgs.concat(Array.from(files));
                });
        }
    };
    const onRemoveImage = (index) => {
        if (onImageFilesChange && imageFilesProp) {
            const _files = imageFilesProp;
            _files.splice(index, 1);
            onImageFilesChange(_files.slice());
        }
        else {
            setImageFiles((imgs) => {
                const _imgs = imageFilesProp || imgs;
                _imgs.splice(index, 1);
                onImageFilesChange && onImageFilesChange(_imgs.slice());
                return _imgs.slice();
            });
        }
    };
    const onRemoveAllImages = () => {
        onImageFilesChange ? onImageFilesChange([]) : setImageFiles([]);
    };
    return {
        onSelectImages,
        onRemoveImage,
        onRemoveAllImages,
        imageSrcs,
        imageFiles: imageFilesProp || imageFiles,
    };
};

const getDefaultFailNoti = (t) => ({
    message: t('notification.failure'),
    type: 'danger',
});

const likeUnlikePost = ({ id, locale, }) => __awaiter(void 0, void 0, void 0, function* () {
    if (!id)
        return;
    const res = yield callApiWithAuth(getApiPath(PATHS.POST.LIKE, {
        id,
        _locale: locale,
    }), 'GET');
    return res;
});
const deletePost = ({ id, locale, }) => __awaiter(void 0, void 0, void 0, function* () {
    if (!id)
        return;
    const res = yield callApiWithAuth(getApiPath(PATHS.POST.DELETE, {
        id,
        _locale: locale,
    }), 'DELETE');
    return res;
});
const getPostFormData = ({ title, description, communityId, imageFiles, previewUrl, topicIds, locale, sanitizeFunction, categoryCommunityId, categoryTopicIds, 
// admin only
introUrl, bannerUrl, scheduleTime, isAnonymous, isAskDoctor, }) => __awaiter(void 0, void 0, void 0, function* () {
    const bodyFormData = new FormData();
    const submitDescription = removeBannedWordWrapper(description);
    const submitTitle = removeBannedWordWrapper(title);
    const mentionIds = getMentionIdsFromString(submitDescription);
    bodyFormData.append('title', submitTitle);
    bodyFormData.append('description', encodePostContent(submitDescription, sanitizeFunction));
    if (categoryCommunityId) {
        bodyFormData.append('category_community', String(categoryCommunityId));
    }
    else if (communityId) {
        bodyFormData.append('community_id', String(communityId));
    }
    bodyFormData.append('is_anonymous', isAnonymous ? '1' : '0');
    bodyFormData.append('is_question', isAskDoctor ? '1' : '0');
    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.title) && bodyFormData.append('preview_title', previewUrl.title);
    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.description) &&
        bodyFormData.append('preview_description', previewUrl.description);
    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) &&
        bodyFormData.append('preview_link', safeEncodeURI(previewUrl.url));
    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.image) &&
        bodyFormData.append('preview_image', safeEncodeURI(previewUrl.image));
    topicIds === null || topicIds === void 0 ? void 0 : topicIds.forEach((topicId) => {
        bodyFormData.append('topics[]', String(topicId || ''));
    });
    categoryTopicIds === null || categoryTopicIds === void 0 ? void 0 : categoryTopicIds.forEach((topicId) => {
        bodyFormData.append('category_topics[]', String(topicId || ''));
    });
    if (!!(imageFiles === null || imageFiles === void 0 ? void 0 : imageFiles.length)) {
        const imageSrcs = yield Promise.all(imageFiles.map((file, index) => new Promise((resolve) => {
            setTimeout(() => {
                resolve(uploadAndGetSrc(file, locale));
            }, index * 2000);
        })));
        imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.filter(Boolean).slice(0, MAX_IMAGE_UPLOADS).forEach((imageFile, index) => {
            bodyFormData.append(`images[${index}]`, imageFile);
        });
    }
    else {
        bodyFormData.append(`images`, '');
    }
    mentionIds === null || mentionIds === void 0 ? void 0 : mentionIds.forEach((mentionId) => {
        bodyFormData.append(`mention_ids[]`, mentionId);
    });
    // Admin only
    bodyFormData.append('intro_url', introUrl || '');
    bodyFormData.append('banner', bannerUrl || '');
    if (scheduleTime) {
        bodyFormData.append('post_type', 'scheduled');
        bodyFormData.append('schedule_datetime', scheduleTime);
    }
    return bodyFormData;
});
const createPost = ({ locale, formData, isArticleComment, }) => __awaiter(void 0, void 0, void 0, function* () {
    const res = yield callApiWithAuth(getApiPath(isArticleComment ? PATHS.POST.CREATE_ARTICLE_COMMENT : PATHS.POST.CREATE, {
        _locale: locale,
    }), 'POST', {
        data: formData,
    });
    return res;
});
const editPost = ({ id, locale, formData, }) => __awaiter(void 0, void 0, void 0, function* () {
    const res = yield callApiWithAuth(getApiPath(PATHS.POST.UPDATE, {
        id,
        _locale: locale,
    }), 'POST', {
        data: formData,
    });
    return res;
});
const reportPost = ({ id, reason, locale, }) => {
    const formData = new FormData();
    formData.append('reason', reason);
    return callApiWithAuth(getApiPath(PATHS.POST.REPORT, {
        _locale: locale,
        id,
    }), 'POST', {
        data: formData,
    });
};

const StyledPopupFrame = styled.div `
  [data-type='confirm'] {
    max-width: 468px;
    /* height: 486px; */
    padding: 0;

    .popup-content {
      display: flex;
      flex-direction: column;
      padding: 0;

      .close-button {
        top: 16px;
        right: 16px;
        width: 24px;
        height: 24px;
        z-index: 5;
      }

      .header {
        display: flex;
        height: 56px;
        align-items: center;
        padding: 16px 56px 16px 32px;
        border-bottom: 1px solid ${theme.colors.neutral100};
        font-weight: 900;
        width: 100%;
        justify-content: space-between;
      }

      .content {
        overflow: auto;
        flex: 1;
        .topic-list-wrapper {
          padding: 1rem;
        }
      }
    }
  }

  > div&[data-open='true'] {
    z-index: 250;
    &:last-child {
      z-index: 200;
    }
  }

  ${(props) => props.isExpand &&
    `
      & > div[data-open] {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
      }
    `}

  ${(props) => props.hasFullscreen &&
    `
      & > div[data-open] {
        transition: all 0.5s ease-in-out, width 0s, height 0s;
      }
    `}
`;
const StyledFSBtn = styled.div `
  cursor: pointer;
  display: flex;
  align-items: center;
`;

const PopupFrame = ({ className, style, closeIcon, heading = '', children, isOpen = false, hasFullscreen = false, disableClickOutside = false, initExpand = false, onExpandChange, onClose = () => null, }) => {
    const [expand, setExpand] = useState(initExpand);
    return (React__default.createElement(StyledPopupFrame, { className: className, style: style, isExpand: expand, hasFullscreen: hasFullscreen },
        React__default.createElement(Popup, { type: "confirm", onClose: onClose, isOpen: isOpen, closeIcon: closeIcon || React__default.createElement("img", { src: CloseIcon, loading: "lazy" }), enableAnimation: !hasFullscreen, disableClickOutside: disableClickOutside },
            React__default.createElement("div", { className: "header" },
                React__default.createElement(Heading, { tag: "h5" }, heading),
                hasFullscreen && (React__default.createElement(StyledFSBtn, { onClick: () => {
                        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange();
                        setExpand(!expand);
                    } },
                    React__default.createElement(FullScreen, { size: 14, isExpand: expand })))),
            React__default.createElement("div", { className: "content" }, typeof children === 'function' ? children(expand) : children))));
};

var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3e%3cpath fill='%23262626' d='M12 22.984c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.478-10 10 4.477 10 10 10'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.828 10.156-5.657 5.657M9.172 10.156l5.657 5.657'/%3e%3c/svg%3e";
var IconCloseCircle = img$4;

const StyledPopupDanger = styled.div `
  [data-type='confirm'] {
    width: min(360px, 100%);
    height: auto;
    &[data-open='false'] {
      top: calc(-100% - 500px);
    }
  }
  z-index: 600;

  .header {
    display: none !important;
  }

  .confirm-dialog {
    position: relative;
    overflow: auto;
    width: 100%;
    padding-top: 44px;
    background: #fff;
    border-radius: ${theme.borderRadius};

    .confirm-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 16px 16px;
      text-align: center;

      .title {
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 32px;
        word-break: break-word;
        overflow-wrap: break-word;
      }

      .desc {
        margin-bottom: 24px;
        color: ${theme.colors.gray500};
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
      }

      .btn-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        button {
          margin: 0 4px 0.5rem;
        }
      }
    }
  }
  .thumbnail-container {
    width: 80px;
    height: 80px;
    margin-bottom: 32px;
    .thumbnail {
      width: 100%;
      height: 100%;
    }
    &.is-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e0e9fc;
      border-radius: 1rem;
      .thumbnail {
        width: 40px;
        height: 40px;
      }
    }
  }
  &[data-is-marrybaby='true'] {
    .popup-frame {
      > div:first-child {
        overflow: hidden;
        border-radius: 1rem;
        &[data-open='true'] {
          ${MediaQueries.mbDown} {
            top: 100%;
            transform: translate(-50%, -100%);
            max-width: unset;
            width: 100%;
            background: unset;
            overflow: unset;
          }
        }
      }
      .popup-content {
        .close-button {
          ${MediaQueries.mbDown} {
            display: none;
          }
        }
        .confirm-dialog {
          ${MediaQueries.mbDown} {
            background: unset;
            position: relative;
            overflow-x: hidden;
            &::before {
              content: '';
              width: 200%;
              background: #fff;
              position: absolute;
              left: 50%;
              top: 0;
              transform: translateX(-50%);
              z-index: -1;
              height: 100%;
              border-top-left-radius: 100%;
              border-top-right-radius: 100%;
            }
          }
          .confirm-content {
            padding: 0 40px 40px;
            ${MediaQueries.mbDown} {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
            }
            .btn-group {
              width: 100%;
              justify-content: space-between;
              button {
                flex: 1;
                margin: 0;
                &:first-child {
                  margin-right: 0.5rem;
                }
              }
            }
          }
        }
      }
      .thumbnail-container {
        ${MediaQueries.mbDown} {
          display: none;
        }
        &.is-icon {
          background: #ffeaf1;
          border-radius: 24px;
        }
        &.is-mobile {
          position: absolute;
          top: 0;
          left: 50%;
          display: none;
          width: 48px;
          height: 48px;
          transform: translate(-50%, -50%);
          &.is-icon {
            border-radius: 1rem;
            .thumbnail {
              width: 24px;
              height: 24px;
            }
          }
          ${MediaQueries.mbDown} {
            display: flex;
          }
        }
      }
    }
  }
`;

const PopupDanger = ({ className, isMarryBaby: isMarryBabyProp, style, title, description, acceptText, cancelText, onAccept, onCancel, thumbnail, isThumbnailIcon, onClose, acceptBtnTracking, acceptBtnProps, cancelBtnProps, }) => {
    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = useContext(TogetherComponentGlobalContext);
    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
    const [isOpen, setIsOpen] = useState(false);
    useEffect(() => {
        toggleNoScroll(true);
        setTimeout(() => setIsOpen(true), 0);
        return () => toggleNoScroll(false);
    }, []);
    if (typeof window === 'undefined')
        return null;
    return ReactDOM.createPortal(React__default.createElement(StyledPopupDanger, { "data-is-marrybaby": isMarryBaby, className: className, style: style, "data-open": isOpen },
        React__default.createElement(PopupFrame, { className: "popup-frame", isOpen: isOpen, onClose: onClose },
            React__default.createElement("div", { className: "confirm-dialog", onClick: (e) => e.stopPropagation() },
                React__default.createElement("div", { className: "confirm-content" },
                    thumbnail && (React__default.createElement("div", { className: `thumbnail-container ${isThumbnailIcon ? 'is-icon' : ''}` },
                        React__default.createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))),
                    React__default.createElement(Heading, { className: "title", tag: "h2" }, title),
                    React__default.createElement(Text, { className: "desc", size: "lg" }, description),
                    React__default.createElement("div", { className: "btn-group" },
                        React__default.createElement(Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "md", color: "tertiary", onClick: () => {
                                onAccept === null || onAccept === void 0 ? void 0 : onAccept();
                                onClose === null || onClose === void 0 ? void 0 : onClose();
                            } }, acceptBtnProps, acceptBtnTracking), acceptText),
                        React__default.createElement(Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "md", onClick: () => {
                                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
                                onClose === null || onClose === void 0 ? void 0 : onClose();
                            } }, cancelBtnProps), cancelText)))),
            isMarryBaby && thumbnail && (React__default.createElement("div", { className: `thumbnail-container is-mobile ${isThumbnailIcon ? 'is-icon' : ''}` },
                React__default.createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))))), getPopupWrapperDom());
};

const StyledInputCommentBar = styled.div `
  padding: 1rem;
  border-top: 1px solid #f2f2f2;
  &[data-is-reply='true'] {
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid #e4e8ec;
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .error-text {
    padding: 1rem;
    color: ${theme.colors.red700};
  }
  .reply-to-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-top: -0.25rem;
    .icon-close-comment {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    a {
      text-decoration: none;
    }
  }
  .input-container {
    display: flex;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      margin-right: 0.5rem;
      &.avatar-wrapper-reply {
        width: 32px;
        height: 32px;
        .avatar {
          width: 32px;
          height: 32px;
        }
      }
    }
    .input-wrapper {
      margin-right: 0.5rem;
      &[data-has-error] {
        .as-input {
          border-color: ${theme.colors.red700};
        }
      }

      .as-input {
        .textarea {
          width: 100%;
          max-height: 225px;
          min-height: 75px;
          .ql-toolbar {
            padding: 0;
          }
          .ql-editor {
            padding-left: 0;
            padding-right: 0;
          }
          .quill {
            height: 0;
          }
        }
        width: 100%;
        padding: 12px 16px;
        border: solid 1px ${theme.colors.gray200};
        border-radius: ${theme.borderRadius};

        &:active,
        &:focus {
          border-color: ${theme.colors.primaryBase};
          box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
        }

        &:disabled {
          background-color: ${theme.colors.gray100};
          cursor: not-allowed;
        }

        span {
          &[data-error='true'] {
            color: red;
            text-decoration: underline;
          }
        }
      }

      &[data-has-action-icon] {
        .as-input {
          padding: 12px 48px 12px 16px;
        }
      }
      &[data-has-display-icon] {
        .as-input {
          padding: 12px 16px 12px 48px;
        }
      }

      &[data-has-action-icon][data-has-display-icon] {
        .as-input {
          padding: 12px 48px;
        }
      }

      &[data-size='lg'] {
        .as-input {
          font-size: 16px;
          font-weight: ${theme.sizes.fwRegular};
          ${MediaQueries.mbDown} {
            font-size: 22px;
            line-height: 1.2;
          }

          ${MediaQueries.mbUp} {
            font-size: 26px;
            line-height: 1.2;
          }
        }
      }
      &[data-size='md'] {
        .as-input {
          font-weight: ${theme.sizes.fwRegular};
          line-height: 22px;
          ${MediaQueries.mbDown} {
            font-size: 14px;
            line-height: 1.2;
          }

          ${MediaQueries.mbUp} {
            font-size: 16px;
            line-height: 1.2;
          }
        }
      }
      &[data-size='sm'] {
        .as-input {
          font-weight: ${theme.sizes.fwRegular};
          line-height: 20px;
          ${MediaQueries.mbDown} {
            font-size: 13px;
            line-height: 1.5;
          }

          ${MediaQueries.mbUp} {
            font-size: 13px;
            line-height: 1.5;
          }
        }
      }
    }
    .images-input-label {
      height: 100%;
      cursor: pointer;
      .icon-images-input {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
    }
    .send-button {
      display: flex;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      &.send-button-post {
        background: ${theme.colors.neutral100};
        border-radius: 50%;
      }
      .icon-enter {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
      &[data-is-loading='true'] {
        > div {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .preview-images-container {
    margin-top: 1rem;
    .image-src-wrapper {
      position: relative;
      width: 100%;
      padding-top: 66.67%;
      &:not(:last-child) {
        margin-bottom: 1rem;
      }
      .preview-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .icon-close-circle {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
`;

const MainInputTriggerContext = createContext({});

var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3ccircle cx='8' cy='8.5' r='6.667' fill='white' stroke='%23404040'/%3e%3cpath stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' d='m10 6.5-4 4M6 6.5l4 4'/%3e%3c/svg%3e";
var IconCloseCircleLine = img$3;

var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 9.734-3.75 3.75 3.75 3.75'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.25 4.734v5.569c0 .843-.33 1.653-.915 2.25a3.1 3.1 0 0 1-2.21.931H3.75'/%3e%3c/svg%3e";
var IconEnter = img$2;

var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M10.754 4.854H4.492a1.79 1.79 0 0 0-1.789 1.789v12.524a1.79 1.79 0 0 0 1.79 1.789h12.523a1.79 1.79 0 0 0 1.79-1.79v-6.261'/%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M17.463 3.512a1.898 1.898 0 0 1 2.684 2.684l-8.498 8.498-3.579.895.895-3.579z'/%3e%3c/svg%3e";
var IconTabEditPrimary = img$1;

const getCommentFormBody = ({ postId, message, photos, link, locale, sanitizeFunction, replyingUserId, replyingUserName, replyingId, }) => __awaiter(void 0, void 0, void 0, function* () {
    const formData = new FormData();
    let submitText = encodePostContent(message.replace(/(\&nbsp;)+/g, ' '), sanitizeFunction);
    const mentionIds = getMentionIdsFromString(submitText);
    if (photos && photos.length > 0) {
        const imageSrcs = yield Promise.all(photos === null || photos === void 0 ? void 0 : photos.map((file) => uploadAndGetSrc(file, locale)));
        imageSrcs
            .filter(Boolean)
            .slice(0, MAX_IMAGE_UPLOADS)
            .forEach((photo) => {
            formData.append('images[]', photo);
        });
    }
    if (link)
        formData.append('link', link);
    mentionIds === null || mentionIds === void 0 ? void 0 : mentionIds.forEach((mentionId) => {
        formData.append(`mention_ids[]`, mentionId);
    });
    formData.append('post_id', postId);
    replyingId && formData.append('parent_id', replyingId);
    if (replyingUserId) {
        mentionIds.unshift(replyingUserId);
        submitText = `[mention+id="${replyingUserId}"+name="${(replyingUserName || '').replace('"', "'")}"]${submitText}`;
        formData.append('parent_user_id', String(replyingUserId));
    }
    formData.append('content', submitText);
    formData.append('content', submitText);
    return formData;
});
const submitComment = (formData, locale) => __awaiter(void 0, void 0, void 0, function* () {
    return callApiWithAuth(getApiPath(PATHS.COMMENT.CREATE, {
        _locale: locale,
    }), 'POST', {
        data: formData,
    });
});
const decodeCommentBody = (s) => {
    try {
        const authorRegex = s.match(/\[@([^\]]+)\]/);
        const replyingTo = authorRegex
            ? authorRegex[0].replace('[@', '').replace(']', '')
            : '';
        const text = s.replace(/\[@([^\]]+)\]/, '');
        return {
            text: text.trim(),
            replyingTo,
        };
    }
    catch (e) { }
    return {
        text: '',
    };
};
const submitReply = (formData, locale) => __awaiter(void 0, void 0, void 0, function* () {
    return callApiWithAuth(getApiPath(PATHS.COMMENT.REPLY, {
        _locale: locale,
    }), 'POST', {
        data: formData,
    });
});
const likeUnlikeComment = ({ commentId, setLike = false, locale, }) => __awaiter(void 0, void 0, void 0, function* () {
    return callApiWithAuth(getApiPath(setLike ? PATHS.COMMENT.LIKE : PATHS.COMMENT.UNLIKE, {
        _locale: locale,
        id: commentId,
    }), 'GET');
});
const deleteComment = ({ id, locale, }) => {
    return callApiWithAuth(getApiPath(PATHS.COMMENT.DELETE, {
        _locale: locale,
        id: id,
    }), 'DELETE');
};

const InputCommentBar = ({ isReply, className, onClose, replyToName, style, replyingId, replyingUser, onPostSuccess, post, isMarryBaby: isMarryBabyProp, }) => {
    const { action: { pushNotifications, sanitizeFunction }, data: { userInfo, locale, env: { isMarryBaby: isMarryBabyContext }, }, } = useContext(TogetherComponentGlobalContext);
    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
    const { t } = useTranslations();
    const { onSelectImages, onRemoveImage, imageSrcs, onRemoveAllImages, imageFiles, } = useImagePicker();
    const [text, setText] = useState('');
    const { trigger } = useContext(MainInputTriggerContext);
    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
    const imagePicker = useRef(null);
    const contentEditable = useRef(null);
    const mainInput = useRef(null);
    const [invalidUrls, setInvalidUrls] = useState([]);
    const [bannedWords, setBannedWords] = useState([]);
    const [previewUrl, setPreviewUrl] = useState(null);
    const onSubmitComment = () => __awaiter(void 0, void 0, void 0, function* () {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        if (!(post === null || post === void 0 ? void 0 : post.id) || isSubmitLoading)
            return;
        setIsSubmitLoading(true);
        try {
            const handleSuccess = (res) => {
                setText('');
                onRemoveAllImages();
                onClose && onClose();
                const newComment = formatComment(res.data);
                if (typeof newComment.images === 'string') {
                    newComment.images = JSON.parse(newComment.images);
                }
                onPostSuccess && onPostSuccess(newComment);
            };
            const formBody = yield getCommentFormBody(Object.assign({ message: text, photos: imageFiles, postId: String(post.id), link: previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url, sanitizeFunction,
                locale }, (isReply && replyingId
                ? {
                    replyingUserId: String((replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.id) || ((_a = post === null || post === void 0 ? void 0 : post.author) === null || _a === void 0 ? void 0 : _a.id) || ''),
                    replyingId,
                    replyingUserName: (replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.name) || (replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.username) || '',
                }
                : {})));
            const res = yield (isReply && replyingId
                ? submitReply(formBody, locale)
                : submitComment(formBody, locale));
            const resData = res === null || res === void 0 ? void 0 : res.data;
            if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_c = (_b = res === null || res === void 0 ? void 0 : res.messages) === null || _b === void 0 ? void 0 : _b.moderation) === null || _c === void 0 ? void 0 : _c.type)) {
                handleSuccess(res);
            }
            else {
                if (((_e = (_d = res === null || res === void 0 ? void 0 : res.messages) === null || _d === void 0 ? void 0 : _d.moderation) === null || _e === void 0 ? void 0 : _e.type) === 'banned') {
                    pushNotifications({
                        title: t('notification.comment.blocked.title'),
                        message: t('notification.comment.blocked.message'),
                        type: 'danger',
                    });
                    if (res.messages.moderation.words) {
                        setBannedWords(res.messages.moderation.words);
                    }
                }
                else if (((_g = (_f = res === null || res === void 0 ? void 0 : res.messages) === null || _f === void 0 ? void 0 : _f.moderation) === null || _g === void 0 ? void 0 : _g.type) === 'suspect') {
                    pushNotifications({
                        title: t('notification.comment.suspect.title'),
                        message: t('notification.comment.suspect.message'),
                        type: 'warning',
                    });
                    setText('');
                    onRemoveAllImages();
                    onClose && onClose();
                }
                else if ((_h = res === null || res === void 0 ? void 0 : res.messages) === null || _h === void 0 ? void 0 : _h.find((m) => { var _a; return !!((_a = m === null || m === void 0 ? void 0 : m.includes) === null || _a === void 0 ? void 0 : _a.call(m, 'suspend')); })) {
                    pushNotifications({
                        message: t('notification.suspend.message'),
                        type: 'warning',
                    });
                    setText('');
                    onRemoveAllImages();
                    onClose && onClose();
                }
                else {
                    pushNotifications({
                        title: '',
                        message: ((_j = res === null || res === void 0 ? void 0 : res.messages) === null || _j === void 0 ? void 0 : _j[0]) || t('notification.comment.somethingWrong'),
                        type: 'danger',
                    });
                }
            }
        }
        catch (e) {
            pushNotifications({
                title: '',
                message: t('notification.comment.somethingWrong'),
                type: 'danger',
            });
        }
        setIsSubmitLoading(false);
    });
    useEffect(() => {
        var _a;
        (_a = mainInput.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        });
        setTimeout(() => {
            var _a;
            (_a = contentEditable.current) === null || _a === void 0 ? void 0 : _a.focus();
        }, 400);
    }, [trigger]);
    return (React__default.createElement(StyledInputCommentBar, { "data-is-reply": isReply, className: className, style: style },
        isReply && (React__default.createElement("div", { className: "reply-to-container" },
            React__default.createElement(Text, { size: "p4" },
                React__default.createElement("span", { dangerouslySetInnerHTML: {
                        __html: t('inputComment.replyTo', {
                            name: `<span style="color: #2D87F3; cursor: pointer">@${replyToName || ''}</span>`,
                        }),
                    } })),
            React__default.createElement("img", { src: IconCloseCircleLine, className: "icon-close-comment", onClick: () => onClose && onClose(), loading: "lazy" }))),
        React__default.createElement("div", { className: "input-container", ref: mainInput },
            React__default.createElement(UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : DEFAULT_AVATAR_IMG, username: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username) }),
            React__default.createElement("input", { ref: imagePicker, onChange: onSelectImages, type: "file", multiple: true, accept: "image/png,image/jpeg", name: "images", style: { display: 'none' } }),
            React__default.createElement(Input
            // actionIcon={
            //   !isPost ? (
            //     <label className="images-input-label">
            //       <img
            //         className="icon-images-input"
            //         src="./svg/icon-image-input.svg"
            //       />
            //       <input
            //         onChange={onSelectImages}
            //         type="file"
            //         multiple
            //         accept="image/png,image/jpeg"
            //         name="images"
            //         style={{ display: 'none' }}
            //       />
            //     </label>
            //   ) : undefined
            // }
            , { 
                // actionIcon={
                //   !isPost ? (
                //     <label className="images-input-label">
                //       <img
                //         className="icon-images-input"
                //         src="./svg/icon-image-input.svg"
                //       />
                //       <input
                //         onChange={onSelectImages}
                //         type="file"
                //         multiple
                //         accept="image/png,image/jpeg"
                //         name="images"
                //         style={{ display: 'none' }}
                //       />
                //     </label>
                //   ) : undefined
                // }
                value: text, name: "input", size: "md", className: "input-wrapper", displayIcon: React__default.createElement("img", { src: IconTabEditPrimary, loading: "lazy" }), CustomInput: React__default.createElement("div", { className: "as-input" },
                    React__default.createElement(RichTextEditor, { className: "textarea", html: text, onChange: setText, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, bannedWords: bannedWords, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, setEditorRef: (div) => (contentEditable.current = div), isReplying: isReply })) }),
            React__default.createElement(Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "send-button", size: "sm", onClick: onSubmitComment, isLoading: isSubmitLoading, isDisabled: !!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ||
                    isSubmitLoading ||
                    !text ||
                    (text === null || text === void 0 ? void 0 : text.length) < 2 ||
                    !text.trim() },
                React__default.createElement("img", { src: IconEnter, className: "icon-enter", loading: "lazy" }))),
        !!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ? (React__default.createElement("div", { className: "error-text" }, t('notification.limitUrlDomain'))) : null,
        (!imageSrcs || imageSrcs.length === 0) && previewUrl && (React__default.createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default.createElement(Loading, null)) : (React__default.createElement(React__default.Fragment, null,
            React__default.createElement(CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
            React__default.createElement("img", { src: IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
        imageSrcs && imageSrcs.length > 0 && (React__default.createElement("div", { className: "preview-images-container" }, imageSrcs.map((src, index) => (React__default.createElement("div", { key: index, className: "image-src-wrapper" },
            React__default.createElement("img", { className: "preview-image", src: src, loading: "lazy" }),
            React__default.createElement("img", { src: IconCloseCircle, className: "icon-close-circle", onClick: () => onRemoveImage(index), loading: "lazy" }))))))));
};

const SharePopup = ({ trackingCategory, className, style, url, 
// avatar,
text, onClose, }) => {
    const { data: { env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
    const { t } = useTranslations();
    const [isOpen, setIsOpen] = useState(false);
    useEffect(() => {
        toggleNoScroll(true);
        setTimeout(() => setIsOpen(true), 0);
        return () => toggleNoScroll(false);
    }, []);
    return (React__default.createElement(Portal, null,
        React__default.createElement(StyledSharePopup, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
            React__default.createElement(PopupFrame, { className: "share-popup", isOpen: isOpen, onClose: onClose, heading: t('bottomBar.share') }, isOpen && (React__default.createElement(ShareBox, { trackingCategory: trackingCategory, shareUrl: url ||
                    (typeof window !== 'undefined' ? window.location.href : ''), title: text }))))));
};
const StyledSharePopup = styled.div `
  .share-popup {
    > div:first-child {
      height: unset;
    }
  }
  .custom-share__header {
    display: flex;
    flex-wrap: no-wrap;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid ${theme.colors.neutral100};
    margin-bottom: 16px;

    .custom-share__header-image {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .custom-share__header-info {
      flex: 1;
      padding: 0 8px;
      word-break: break-word;

      [data-tag='h4'] {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
      }

      [data-size='md'] {
        color: #a5a5a5;
        font-size: 14px;
        line-height: 14px;
      }
    }
  }

  &[data-is-marrybaby='true'] {
    .share-popup {
      > div:first-child {
        overflow: hidden;
        border-radius: 1rem;
        &[data-open='true'] {
          ${MediaQueries.mbDown} {
            max-width: unset;
            width: 100%;
            top: 100%;
            transform: translate(-50%, -100%);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }
      .close-button {
        display: block;
      }
      .popup-content {
        .header {
          display: block;
          padding: 1rem;
          background-color: rgb(243, 243, 243);
        }
        .content {
          padding-bottom: 1rem;
        }
      }
      .share-mb-text {
        margin: 1rem 1rem 0.5rem;
      }
    }
  }
`;

const StyledSubmitReportForm = styled.div `
  padding: 0 8px;
  margin-top: 18px;

  .report-list {
    margin-bottom: 18px;

    .report-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-weight: 600;

      & > img {
        width: 12px;
        height: 12px;
        margin-right: 8px;
      }

      .__label {
        font-size: 14px;
      }
    }
  }

  .report-submit {
    width: 100%;
  }
  &[data-is-marrybaby='true'] {
    padding: 0 1rem 1rem;
  }
`;

var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12M8 5v3M8 11h.007'/%3e%3c/svg%3e";
var IconAlertCircle = img;

const SubmitReportForm = ({ className, style, reason, reasonText, onClose, postId, }) => {
    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
    const { t } = useTranslations();
    const [loading, setLoading] = useState(false);
    return (React__default.createElement(StyledSubmitReportForm, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
        React__default.createElement("ul", { className: "report-list" },
            React__default.createElement("li", { className: "report-item" },
                React__default.createElement("img", { src: IconAlertCircle, loading: "lazy" }),
                React__default.createElement(Text, { className: "__label", color: theme.colors.gray800, size: "p4" }, reasonText))),
        React__default.createElement(Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "report-submit", size: "lg", color: "primary", isLoading: loading, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                if (!postId || loading)
                    return;
                setLoading(true);
                try {
                    const res = yield reportPost({
                        id: postId,
                        reason,
                        locale,
                    });
                    if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
                        pushNotifications({
                            message: 'Post reported',
                            type: 'success',
                        });
                        onClose && onClose();
                    }
                }
                catch (_a) { }
                setLoading(false);
            }) }, t('submit'))));
};

export { InputCommentBar as I, PopupDanger as P, SharePopup as S, PopupFrame as a, SubmitReportForm as b, IconCloseCircle as c, getPostFormData as d, editPost as e, createPost as f, getDefaultFailNoti as g, deletePost as h, IconAlertCircle as i, deleteComment as j, decodeCommentBody as k, likeUnlikeComment as l, likeUnlikePost as m, useImagePicker as u };
