import CloseIcon from "@mui/icons-material/Close";
import DownloadIcon from "@mui/icons-material/Download";
import {
  AppBar,
  Button,
  Dialog,
  IconButton,
  Toolbar,
  Typography,
} from "@mui/material";
import { filesize } from "filesize";
import React from "react";
import { FileApi, UploadedFile } from "../api/FileApi";
import { FileViewerWidget } from "../widgets/FileViewerWidget";

export function FileViewerDialog(p: {
  open: boolean;
  onClose: () => void;
  file: UploadedFile;
}): React.ReactElement {
  if (!p.open) return <></>;
  return (
    <Dialog open={p.open} onClose={p.onClose} fullScreen>
      <AppBar sx={{ position: "relative" }}>
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            onClick={p.onClose}
            aria-label="close"
            autoFocus
          >
            <CloseIcon />
          </IconButton>
          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
            {p.file.file_name} ({filesize(p.file.file_size)})
          </Typography>
          <a
            href={FileApi.DownloadURL(p.file, true)}
            target="_blank"
            referrerPolicy="no-referrer"
          >
            <Button
              color="info"
              onClick={p.onClose}
              startIcon={<DownloadIcon />}
            >
              Download
            </Button>
          </a>
        </Toolbar>
      </AppBar>
      <FileViewerWidget file={p.file} />
    </Dialog>
  );
}
