import CloseIcon from "@mui/icons-material/Close";
import {
  Alert,
  AppBar,
  Button,
  Dialog,
  Grid,
  IconButton,
  Toolbar,
  Typography,
} from "@mui/material";
import React from "react";
import { InboxEntry } from "../api/InboxApi";
import { Movement } from "../api/MovementsApi";
import { AsyncFileViewerWidget } from "../widgets/FileViewerWidget";
import { SelectMovementWidget } from "../widgets/SelectMovementWidget";
import { AmountWidget } from "../widgets/AmountWidget";
import { fmtDateFromTime } from "../utils/DateUtils";

export function AttachInboxEntryToMovementDialog(p: {
  open: boolean;
  entry: InboxEntry;
  onSelected: (m: Movement) => void;
  onClose: () => void;
}): React.ReactElement {
  const [value, setValue] = React.useState<undefined | Movement>();

  const handleSubmit = () => {
    if (!value) return;
    p.onSelected(value);
  };

  return (
    <Dialog fullScreen open={true} onClose={p.onClose}>
      <AppBar sx={{ position: "relative" }}>
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            onClick={p.onClose}
            aria-label="close"
          >
            <CloseIcon />
          </IconButton>
          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
            Attach inbox entry to movement
          </Typography>
          <Typography
            sx={{ ml: 2, flex: 1 }}
            style={{ display: "flex", flexDirection: "column" }}
          >
            <span>
              {p.entry.amount !== undefined && (
                <>
                  <span>
                    Amount: <AmountWidget amount={p.entry.amount} />
                  </span>
                </>
              )}
            </span>
            <span>{p.entry.label && <>Label: {p.entry.label}</>}</span>
            <span>
              {p.entry.time && <>Date: {fmtDateFromTime(p.entry.time)}</>}
            </span>
          </Typography>
          {Number.isFinite(p.entry.amount) &&
            value !== undefined &&
            p.entry.amount !== value.amount && (
              <Alert severity="warning">Amount mismatch!</Alert>
            )}
          <Button
            autoFocus
            color="inherit"
            onClick={handleSubmit}
            disabled={!value}
          >
            Attach
          </Button>
        </Toolbar>
      </AppBar>
      <Grid container style={{ flex: 1 }}>
        <Grid
          size={{ sm: 12, md: 6 }}
          style={{
            display: "flex",
            height: "100%",
          }}
        >
          <AsyncFileViewerWidget fileID={p.entry.file_id} />
        </Grid>
        <Grid
          size={{ sm: 12, md: 6 }}
          style={{ display: "flex", height: "100%" }}
        >
          <SelectMovementWidget
            value={value?.id}
            onChange={setValue}
            initialValues={{
              amount: p.entry.amount,
              time: p.entry.time,
              label: p.entry.label,
            }}
          />
        </Grid>
      </Grid>
    </Dialog>
  );
}