import * as React from "react";
import { useContext, useEffect, useRef, useState } from "react";
import { Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, Tooltip, useMediaQuery } from "@mui/material";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
import { Close } from "@mui/icons-material";
import MenuItem from "@mui/material/MenuItem";
import Box from "@mui/material/Box";
import { Trans, useTranslation } from "react-i18next";
import priority1 from "../img/priority-1.svg";
import priority2 from "../img/priority-2.svg";
import priority3 from "../img/priority-3.svg";
import priority4 from "../img/priority-4.svg";
import priority5 from "../img/priority-5.svg";
import { formatBytes, maybeWithAuth, topicShortUrl, topicUrl, validTopic, validUrl } from "../app/utils";
import AttachmentIcon from "./AttachmentIcon";
import DialogFooter from "./DialogFooter";
import api from "../app/Api";
import userManager from "../app/UserManager";
import EmojiPicker from "./EmojiPicker";
import theme from "./theme";
import session from "../app/Session";
import routes from "./routes";
import accountApi from "../app/AccountApi";
import { UnauthorizedError } from "../app/errors";
import { AccountContext } from "./App";
const PublishDialog = (props) => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const [baseUrl, setBaseUrl] = useState("");
const [topic, setTopic] = useState("");
const [message, setMessage] = useState("");
const [messageFocused, setMessageFocused] = useState(true);
const [title, setTitle] = useState("");
const [tags, setTags] = useState("");
const [priority, setPriority] = useState(3);
const [clickUrl, setClickUrl] = useState("");
const [attachUrl, setAttachUrl] = useState("");
const [attachFile, setAttachFile] = useState(null);
const [filename, setFilename] = useState("");
const [filenameEdited, setFilenameEdited] = useState(false);
const [email, setEmail] = useState("");
const [call, setCall] = useState("");
const [delay, setDelay] = useState("");
const [publishAnother, setPublishAnother] = useState(false);
const [showTopicUrl, setShowTopicUrl] = useState("");
const [showClickUrl, setShowClickUrl] = useState(false);
const [showAttachUrl, setShowAttachUrl] = useState(false);
const [showEmail, setShowEmail] = useState(false);
const [showCall, setShowCall] = useState(false);
const [showDelay, setShowDelay] = useState(false);
const showAttachFile = !!attachFile && !showAttachUrl;
const attachFileInput = useRef();
const [attachFileError, setAttachFileError] = useState("");
const [activeRequest, setActiveRequest] = useState(null);
const [status, setStatus] = useState("");
const disabled = !!activeRequest;
const [emojiPickerAnchorEl, setEmojiPickerAnchorEl] = useState(null);
const [dropZone, setDropZone] = useState(false);
const [sendButtonEnabled, setSendButtonEnabled] = useState(true);
const open = !!props.openMode;
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
useEffect(() => {
window.addEventListener("dragenter", () => {
props.onDragEnter();
setDropZone(true);
});
}, []);
useEffect(() => {
setBaseUrl(props.baseUrl);
setTopic(props.topic);
setShowTopicUrl(!props.baseUrl || !props.topic);
setMessageFocused(!!props.topic); // Focus message only if topic is set
}, [props.baseUrl, props.topic]);
useEffect(() => {
const valid = validUrl(baseUrl) && validTopic(topic) && !attachFileError;
setSendButtonEnabled(valid);
}, [baseUrl, topic, attachFileError]);
useEffect(() => {
setMessage(props.message);
}, [props.message]);
const updateBaseUrl = (newVal) => {
if (validUrl(newVal)) {
setBaseUrl(newVal.replace(/\/$/, "")); // strip traililng slash after https?://
} else {
setBaseUrl(newVal);
}
};
const handleSubmit = async () => {
const url = new URL(topicUrl(baseUrl, topic));
if (title.trim()) {
url.searchParams.append("title", title.trim());
}
if (tags.trim()) {
url.searchParams.append("tags", tags.trim());
}
if (priority && priority !== 3) {
url.searchParams.append("priority", priority.toString());
}
if (clickUrl.trim()) {
url.searchParams.append("click", clickUrl.trim());
}
if (attachUrl.trim()) {
url.searchParams.append("attach", attachUrl.trim());
}
if (filename.trim()) {
url.searchParams.append("filename", filename.trim());
}
if (email.trim()) {
url.searchParams.append("email", email.trim());
}
if (call.trim()) {
url.searchParams.append("call", call.trim());
}
if (delay.trim()) {
url.searchParams.append("delay", delay.trim());
}
if (attachFile && message.trim()) {
url.searchParams.append("message", message.replaceAll("\n", "\\n").trim());
}
const body = attachFile || message;
try {
const user = await userManager.get(baseUrl);
const headers = maybeWithAuth({}, user);
const progressFn = (ev) => {
if (ev.loaded > 0 && ev.total > 0) {
setStatus(
t("publish_dialog_progress_uploading_detail", {
loaded: formatBytes(ev.loaded),
total: formatBytes(ev.total),
percent: Math.round((ev.loaded * 100.0) / ev.total),
})
);
} else {
setStatus(t("publish_dialog_progress_uploading"));
}
};
const request = api.publishXHR(url, body, headers, progressFn);
setActiveRequest(request);
await request;
if (!publishAnother) {
props.onClose();
} else {
setStatus(t("publish_dialog_message_published"));
setActiveRequest(null);
}
} catch (e) {
setStatus({e});
setActiveRequest(null);
}
};
const checkAttachmentLimits = async (file) => {
try {
const apiAccount = await accountApi.get();
const fileSizeLimit = apiAccount.limits.attachment_file_size ?? 0;
const remainingBytes = apiAccount.stats.attachment_total_size_remaining;
const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit;
const quotaReached = remainingBytes > 0 && file.size > remainingBytes;
if (fileSizeLimitReached && quotaReached) {
setAttachFileError(
t("publish_dialog_attachment_limits_file_and_quota_reached", {
fileSizeLimit: formatBytes(fileSizeLimit),
remainingBytes: formatBytes(remainingBytes),
})
);
} else if (fileSizeLimitReached) {
setAttachFileError(
t("publish_dialog_attachment_limits_file_reached", {
fileSizeLimit: formatBytes(fileSizeLimit),
})
);
} else if (quotaReached) {
setAttachFileError(
t("publish_dialog_attachment_limits_quota_reached", {
remainingBytes: formatBytes(remainingBytes),
})
);
} else {
setAttachFileError("");
}
} catch (e) {
console.log(`[PublishDialog] Retrieving attachment limits failed`, e);
if (e instanceof UnauthorizedError) {
session.resetAndRedirect(routes.login);
} else {
setAttachFileError(""); // Reset error (rely on server-side checking)
}
}
};
const handleAttachFileClick = () => {
attachFileInput.current.click();
};
const updateAttachFile = async (file) => {
setAttachFile(file);
setFilename(file.name);
props.onResetOpenMode();
await checkAttachmentLimits(file);
};
const handleAttachFileChanged = async (ev) => {
await updateAttachFile(ev.target.files[0]);
};
const handleAttachFileDrop = async (ev) => {
ev.preventDefault();
setDropZone(false);
await updateAttachFile(ev.dataTransfer.files[0]);
};
const handleAttachFileDragLeave = () => {
setDropZone(false);
if (props.openMode === PublishDialog.OPEN_MODE_DRAG) {
props.onClose(); // Only close dialog if it was not open before dragging file in
}
};
const handleEmojiClick = (ev) => {
setEmojiPickerAnchorEl(ev.currentTarget);
};
const handleEmojiPick = (emoji) => {
setTags((prevTags) => (prevTags.trim() ? `${prevTags.trim()}, ${emoji}` : emoji));
};
const handleEmojiClose = () => {
setEmojiPickerAnchorEl(null);
};
const priorities = {
1: { label: t("publish_dialog_priority_min"), file: priority1 },
2: { label: t("publish_dialog_priority_low"), file: priority2 },
3: { label: t("publish_dialog_priority_default"), file: priority3 },
4: { label: t("publish_dialog_priority_high"), file: priority4 },
5: { label: t("publish_dialog_priority_max"), file: priority5 },
};
return (
<>
{dropZone && }
>
);
};
const Row = (props) => (
{props.children}
);
const ClosableRow = (props) => {
const closable = props.closable !== undefined ? props.closable : true;
return (
{props.children}
{closable && (
)}
);
};
const DialogIconButton = (props) => {
const sx = props.sx || {};
return (
{props.children}
);
};
const AttachmentBox = (props) => {
const { t } = useTranslation();
const { file } = props;
return (
<>
{t("publish_dialog_attached_file_title")}
props.onChangeFilename(ev.target.value)}
disabled={props.disabled}
/>
{formatBytes(file.size)}
{props.error && (
{" "}
({props.error})
)}
>
);
};
const ExpandingTextField = (props) => {
const invisibleFieldRef = useRef();
const [textWidth, setTextWidth] = useState(props.minWidth);
const determineTextWidth = () => {
const boundingRect = invisibleFieldRef?.current?.getBoundingClientRect();
if (!boundingRect) {
return props.minWidth;
}
return boundingRect.width >= props.minWidth ? Math.round(boundingRect.width) : props.minWidth;
};
useEffect(() => {
setTextWidth(determineTextWidth() + 5);
}, [props.value]);
return (
<>
{props.value}
>
);
};
const DropArea = (props) => {
const allowDrag = (ev) => {
// This is where we could disallow certain files to be dragged in.
// For now we allow all files.
// eslint-disable-next-line no-param-reassign
ev.dataTransfer.dropEffect = "copy";
ev.preventDefault();
};
return (
);
};
const DropBox = () => {
const { t } = useTranslation();
return (
{t("publish_dialog_drop_file_here")}
);
};
PublishDialog.OPEN_MODE_DEFAULT = "default";
PublishDialog.OPEN_MODE_DRAG = "drag";
export default PublishDialog;