/**
 * The "and this too" you type at 9am.
 *
 * The draft lives here rather than in the page: it is this dialog's business and
 * nothing else ever reads it.
 */
import { useState } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  TextField,
  Typography,
} from "@mui/material";

import { api } from "../../lib/api";

export default function AddTaskDialog({
  open,
  onClose,
  onCreated,
}: {
  open: boolean;
  onClose: () => void;
  onCreated: () => Promise<void>;
}) {
  const [draft, setDraft] = useState({ title: "", due_date: "" });

  return (
    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
      <DialogTitle>New task</DialogTitle>
      <DialogContent>
        <Stack spacing={2} sx={{ mt: 1 }}>
          <TextField
            autoFocus
            label="What needs doing?"
            value={draft.title}
            onChange={(event) => setDraft({ ...draft, title: event.target.value })}
          />
          <TextField
            label="Due date"
            type="date"
            InputLabelProps={{ shrink: true }}
            value={draft.due_date}
            onChange={(event) => setDraft({ ...draft, due_date: event.target.value })}
          />
          <Typography variant="caption" color="text.secondary">
            Local tasks live only here, so they are the one kind you can delete.
          </Typography>
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button
          variant="contained"
          disabled={!draft.title.trim()}
          onClick={async () => {
            await api.post("/api/tasks", {
              title: draft.title.trim(),
              due_date: draft.due_date || null,
            });
            setDraft({ title: "", due_date: "" });
            onClose();
            await onCreated();
          }}
        >
          Add
        </Button>
      </DialogActions>
    </Dialog>
  );
}