"use client";

import Dialog from "@mui/material/Dialog";
import { alpha, useTheme } from "@mui/material/styles";

import { AllMeetingRequestsPanel } from "./all-meeting-requests-panel";
import {
  createMeetingSummaryRequestItems,
  type CreateMeetingSummaryRequestItem,
} from "./create-meeting-summary-data";

const DIALOG_Z_INDEX = 1700;

type Props = {
  open: boolean;
  onClose: () => void;
  onConfirm?: (items: CreateMeetingSummaryRequestItem[]) => void;
};

export function CreateMeetingSummaryDialog({
  open,
  onClose,
  onConfirm,
}: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth={false}
      scroll="paper"
      sx={{
        zIndex: DIALOG_Z_INDEX,
        "& .MuiBackdrop-root": {
          bgcolor: "rgba(0, 0, 0, 0.35)",
        },
        "& .MuiDialog-container": {
          justifyContent: "flex-end",
          alignItems: "flex-start",
        },
      }}
      slotProps={{
        paper: {
          sx: {
            mt: 0,
            mr: 0,
            width: 454,
            maxWidth: "95vw",
            height: "calc(100vh - 16px)",
            maxHeight: "calc(100vh - 16px)",
            borderRadius: "10px",
            overflow: "hidden",
            bgcolor: isDark ? "#101828" : "#ffffff",
            color: theme.palette.text.primary,
            border: `1px solid ${isDark ? alpha("#ffffff", 0.12) : "#e9eaeb"}`,
            boxShadow: "0px 18px 45px rgba(16, 24, 40, 0.18)",
            display: "flex",
            flexDirection: "column",
          },
        },
      }}
    >
      {open ? (
        <AllMeetingRequestsPanel
          items={createMeetingSummaryRequestItems}
          onConfirm={onConfirm}
          onClose={onClose}
        />
      ) : null}
    </Dialog>
  );
}