Checkmate/client/src/Components/v2/common/controls/HeaderMonitorControls.tsx

import Stack from "@mui/material/Stack";
import { Icon, MonitorStatus } from "@/Components/v2/design-elements";
import { Button } from "@/Components/v2/inputs";
import { Settings, Pause, Play, Mail, Bug } from "lucide-react";

import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@mui/material/styles";
import { usePost } from "@/Hooks/UseApi";

import type { Monitor } from "@/Types/Monitor.js";

interface HeaderMonitorControlsProps {
	path: string;
	monitor?: Monitor;
	isAdmin: boolean;
	refetch: Function;
}

export const HeaderMonitorControls = ({
	path,
	monitor,
	isAdmin,
	refetch,
}: HeaderMonitorControlsProps) => {
	const { t } = useTranslation();
	const navigate = useNavigate();
	const theme = useTheme();
	const {
		post,
		loading: isPosting,
		// error: postError,
	} = usePost<any, Monitor>();

	if (!monitor) {
		return null;
	}
	return (
		<Stack
			spacing={{ xs: theme.spacing(8), md: 0 }}
			direction={{ xs: "column", md: "row" }}
			alignItems={"center"}
			justifyContent={"space-between"}
		>
			<MonitorStatus monitor={monitor} />
			<Stack
				width={{ xs: "100%", md: "auto" }}
				direction={{ xs: "column", md: "row" }}
				gap={theme.spacing(2)}
			>
				<Button
					variant="contained"
					color="secondary"
					loading={isPosting}
					startIcon={<Icon icon={Mail} />}
					onClick={async () => {
						await post(`/notifications/test/all`, { monitorId: monitor.id });
					}}
					sx={{
						whiteSpace: "nowrap",
					}}
				>
					{t("common.buttons.testNotifications")}
				</Button>
				<Button
					variant="contained"
					color="secondary"
					startIcon={<Icon icon={Bug} />}
					onClick={() => {
						navigate(`/incidents/${monitor?.id}`);
					}}
				>
					{t("common.buttons.incidents")}
				</Button>
				{isAdmin && (
					<Button
						variant="contained"
						color="secondary"
						loading={isPosting}
						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
						onClick={async () => {
							await post(`/monitors/pause/${monitor.id}`, {});
							await refetch();
						}}
					>
						{monitor?.isActive ? t("pause") : t("resume")}
					</Button>
				)}
				{isAdmin && (
					<Button
						variant="contained"
						color="secondary"
						startIcon={<Icon icon={Settings} />}
						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
					>
						Configure
					</Button>
				)}
			</Stack>
		</Stack>
	);
};