"use client";
import { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";
import { HyperlinkIcon, Users } from "@/components/ui/icon";
import type { MeetingRequest } from "@/features/ministry/meeting-request/meeting-request-data";
import { getMeetingRequests } from "@/features/ministry/meeting-request/service/meeting-requests-service";
const POPOVER_Z_INDEX = 1700;
type LinkMeetingRequestPopoverProps = {
open: boolean;
selectedIds: number[];
onClose: () => void;
onConfirm: (requests: MeetingRequest[]) => void;
};
function MeetingRequestListItem({
request,
selected,
onToggle,
}: {
request: MeetingRequest;
selected: boolean;
onToggle: () => void;
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{request.title}
PSWG :
{request.privateSectorWG?.trim() || "-"}
{request.requestedDate}
);
}
export function LinkMeetingRequestPopover({
open,
selectedIds,
onClose,
onConfirm,
}: LinkMeetingRequestPopoverProps) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
);
}
function LinkMeetingRequestPopoverContent({
selectedIds,
onClose,
onConfirm,
}: Pick<
LinkMeetingRequestPopoverProps,
"selectedIds" | "onClose" | "onConfirm"
>) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const [requests, setRequests] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [draftIds, setDraftIds] = useState(() => selectedIds);
useEffect(() => {
let cancelled = false;
void getMeetingRequests()
.then((data) => {
if (!cancelled) {
setRequests(data);
}
})
.catch(() => {
if (!cancelled) {
setError("Unable to load meeting requests.");
setRequests([]);
}
})
.finally(() => {
if (!cancelled) {
setLoading(false);
}
});
return () => {
cancelled = true;
};
}, []);
const toggleRequest = (id: number) => {
setDraftIds((current) =>
current.includes(id)
? current.filter((item) => item !== id)
: [...current, id],
);
};
const handleConfirm = () => {
const selectedRequests = requests.filter((item) =>
draftIds.includes(item.id),
);
onConfirm(selectedRequests);
onClose();
};
return (
<>
All Meeting Requests
{loading ? (
Loading meeting requests...
) : null}
{!loading && error ? (
{error}
) : null}
{!loading && !error && requests.length === 0 ? (
No meeting requests available.
) : null}
{!loading &&
!error &&
requests.map((request) => (
toggleRequest(request.id)}
/>
))}
);
}