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 Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useEffect, useState } from "react";
import { ExternalImageUploadField } from "../shared/ExternalImageUploadField.jsx";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";

export function RoomEditDialog({ loading, onClose, onSubmit, open, room }) {
  const { t } = useExternalI18n();
  const [form, setForm] = useState({ coverUrl: "", description: "", title: "", visibleRegionId: "" });
  useEffect(() => {
    setForm({ coverUrl: room?.coverUrl || "", description: room?.description || "", title: room?.title || "", visibleRegionId: room?.visibleRegionId || "" });
  }, [room]);
  return (
    <Dialog fullWidth maxWidth="sm" open={open} onClose={loading ? undefined : onClose}>
      <Stack component="form" onSubmit={(event) => { event.preventDefault(); onSubmit(form); }}>
        <DialogTitle>{t("rooms.editTitle")}</DialogTitle>
        <DialogContent><Stack className="external-dialog-fields" spacing={2}>
          <ExternalImageUploadField disabled={loading} label={t("rooms.background")} value={form.coverUrl} onChange={(coverUrl) => setForm({ ...form, coverUrl })} />
          <TextField disabled={loading} label={t("rooms.name")} required value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} />
          <TextField disabled={loading} label={t("rooms.description")} minRows={3} multiline value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} />
          <TextField disabled={loading} label={t("rooms.visibleRegionId")} value={form.visibleRegionId} onChange={(event) => setForm({ ...form, visibleRegionId: event.target.value.trim() })} />
        </Stack></DialogContent>
        <DialogActions><Button disabled={loading} onClick={onClose}>{t("common.cancel")}</Button><Button disabled={loading} type="submit" variant="contained">{t("common.save")}</Button></DialogActions>
      </Stack>
    </Dialog>
  );
}
