RecipeModal.tsx

import { DATA_SERVICES } from "@/constants/constants";
import { DataService } from "@/types";
import {
  Autocomplete,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  TextField,
} from "@mui/material";
import { useEffect, useState } from "react";

interface RecipeModalProps {
  open: boolean;
  onClose: () => void;
}

export function RecipeModal({ open, onClose }: RecipeModalProps) {
  const [data, setData] = useState<Array<DataService> | undefined>();
  const [loading, setLoading] = useState<boolean>(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (open) {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        setData(DATA_SERVICES);
      }, 1000);
    } else {
      setData(undefined);
    }
  }, [open]);

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    // TODO send data
    onClose();
    setSaving(false);
  }

  return (
    <Dialog
      open={open}
      onClose={() => {
        if (!saving) {
          onClose();
        }
      }}
      PaperProps={{
        component: "form",
        onSubmit: onSubmit,
      }}
      aria-labelledby="form-dialog-title"
      aria-describedby="form-dialog-description"
      fullWidth
    >
      <DialogTitle id="form-dialog-title">Création recette</DialogTitle>
      <DialogContent>
        <Stack paddingTop={1} spacing={2}>
          <Autocomplete
            options={data ?? []}
            loading={loading}
            renderInput={(params) => (
              <TextField {...params} label="Data service" />
            )}
            getOptionLabel={(option) => option.name}
          />
          <Autocomplete
            options={[{ label: "default" }, { label: "default-dry-run" }]}
            renderInput={(params) => (
              <TextField {...params} label="Process type" />
            )}
          />
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Annuler</Button>
        <Button type="submit">Valider</Button>
      </DialogActions>
    </Dialog>
  );
}