import Alert from "@mui/material/Alert";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import MenuItem from "@mui/material/MenuItem";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useEffect, useState } from "react";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";

export function ResourceGrantDialog({ loading, onClose, onSubmit, open, resources }) {
  const { t } = useExternalI18n();
  const [form, setForm] = useState(resourceGrantInitial);
  useEffect(() => setForm(resourceGrantInitial), [open]);
  return (
    <GrantDialog loading={loading} open={open} title={t("grants.resourceTitle")} onClose={onClose} onSubmit={() => onSubmit(form)}>
      <TargetNotice />
      <TextField disabled={loading} label={t("grants.target")} required value={form.target} onChange={(event) => setForm({ ...form, target: event.target.value.trim() })} />
      <TextField disabled={loading} label={t("grants.resource")} required select value={form.resourceId} onChange={(event) => setForm({ ...form, resourceId: event.target.value })}>
        {resources.map((item) => <MenuItem key={item.id} value={item.id}>{item.name} ({item.id})</MenuItem>)}
      </TextField>
      <TextField disabled={loading} label={t("grants.quantity")} required slotProps={{ htmlInput: { min: 1 } }} type="number" value={form.quantity} onChange={(event) => setForm({ ...form, quantity: event.target.value })} />
      <TextField disabled={loading} helperText={t("grants.permanentHint")} label={t("grants.validDays")} required slotProps={{ htmlInput: { min: 0 } }} type="number" value={form.durationDays} onChange={(event) => setForm({ ...form, durationDays: event.target.value })} />
      <TextField disabled={loading} label={t("grants.reason")} minRows={2} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
    </GrantDialog>
  );
}

export function PrettyIdGrantDialog({ loading, onClose, onSubmit, open }) {
  const { t } = useExternalI18n();
  const [form, setForm] = useState(prettyGrantInitial);
  useEffect(() => setForm(prettyGrantInitial), [open]);
  return (
    <GrantDialog loading={loading} open={open} title={t("grants.prettyIdTitle")} onClose={onClose} onSubmit={() => onSubmit(form)}>
      <TargetNotice />
      <TextField disabled={loading} label={t("grants.currentTarget")} required value={form.target} onChange={(event) => setForm({ ...form, target: event.target.value.trim() })} />
      <TextField disabled={loading} label={t("grants.prettyId")} required slotProps={{ htmlInput: { inputMode: "numeric", pattern: "[0-9]*" } }} value={form.prettyId} onChange={(event) => setForm({ ...form, prettyId: event.target.value.trim() })} />
      <TextField disabled={loading} helperText={t("grants.permanentHint")} label={t("grants.validDays")} required slotProps={{ htmlInput: { min: 0 } }} type="number" value={form.durationDays} onChange={(event) => setForm({ ...form, durationDays: event.target.value })} />
      <TextField disabled={loading} label={t("grants.reason")} minRows={2} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
    </GrantDialog>
  );
}

function TargetNotice() {
  const { t } = useExternalI18n();
  return <Alert severity="info">{t("grants.notice")}</Alert>;
}

function GrantDialog({ children, loading, onClose, onSubmit, open, title }) {
  const { t } = useExternalI18n();
  return (
    <Dialog fullWidth maxWidth="sm" open={open} onClose={loading ? undefined : onClose}>
      <Stack component="form" onSubmit={(event) => { event.preventDefault(); onSubmit(); }}>
        <DialogTitle>{title}</DialogTitle>
        <DialogContent><Stack className="external-dialog-fields" spacing={2}>{children}</Stack></DialogContent>
        <DialogActions><Button disabled={loading} onClick={onClose}>{t("common.cancel")}</Button><Button disabled={loading} type="submit" variant="contained">{t("grants.confirm")}</Button></DialogActions>
      </Stack>
    </Dialog>
  );
}

const resourceGrantInitial = { durationDays: "30", quantity: "1", reason: "", resourceId: "", target: "" };
const prettyGrantInitial = { durationDays: "0", prettyId: "", reason: "", target: "" };