import { useParams } from "react-router-dom";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { useColorScheme } from "@mui/material/styles";

interface ConnectionDialogProps {
  open: boolean;
  onClose: () => void;
}

const ConnectionDialog = ({ open, onClose }: ConnectionDialogProps) => {
  const { roomId, userId } = useParams<{ roomId: string; userId: string }>();
  const { mode } = useColorScheme();

  const handleCopyCode = () => {
    const code = `from zndraw import ZnDraw\n\nvis = ZnDraw(\n  url="${window.location.origin}/",\n  room="${roomId}",\n  user="${userId}"\n)`;
    navigator.clipboard.writeText(code);
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>Connect to this ZnDraw session</DialogTitle>
      <DialogContent>
        <Typography variant="body2" sx={{ mb: 2 }}>
          You can connect a Python kernel to this ZnDraw session using:
        </Typography>
        <Box sx={{ position: "relative" }}>
          <SyntaxHighlighter
            language="python"
            style={mode === "dark" ? oneDark : oneLight}
            customStyle={{
              margin: 0,
              borderRadius: "4px",
            }}
          >
            {`from zndraw import ZnDraw\n\nvis = ZnDraw(\n  url="${window.location.origin}/",\n  room="${roomId}",\n  user="${userId}"\n)`}
          </SyntaxHighlighter>
          <Button
            startIcon={<ContentCopyIcon />}
            onClick={handleCopyCode}
            sx={{
              mt: 1,
            }}
            variant="outlined"
            size="small"
          >
            Copy to clipboard
          </Button>
        </Box>
      </DialogContent>
    </Dialog>
  );
};

export default ConnectionDialog;
