import React from "react";
import { TextInputDialog } from "./TextInputDialog";
import { ServerApi } from "../api/ServerApi";
import { FamilyApi } from "../api/FamilyApi";
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";

export function CreateFamilyDialog(p: {
  open: boolean;
  onClose: () => void;
  onCreated: () => void;
}): React.ReactElement {
  const [name, setName] = React.useState("");
  const [creating, setCreating] = React.useState(false);
  const [error, setError] = React.useState(false);

  const alert = useAlert();

  const cancel = () => {
    setName("");
    setCreating(false);
    setError(false);
    p.onClose();
  };

  const createFamily = async () => {
    setCreating(true);
    try {
      await FamilyApi.CreateFamily(name);
      setName("");
      p.onCreated();
      await alert("La famille a été créée avec succès !");
    } catch (e) {
      console.error(e);
      setError(true);
    }
    setCreating(false);
  };

  return (
    <TextInputDialog
      open={p.open}
      title="Création d'une famille"
      text="Veuillez définir le nom que vous souhaitez donner à la famille créée :"
      label="Nom de la famille"
      minLen={ServerApi.Config.constraints.family_name_len.min}
      maxLen={ServerApi.Config.constraints.family_name_len.max}
      onClose={cancel}
      onCancel={cancel}
      submitButton="Créer la famille"
      value={name}
      onValueChange={setName}
      isChecking={creating}
      checkingMessage="Création en cours..."
      errorIsBlocking={false}
      error={error ? "Echec de la création de la famille !" : undefined}
      onSubmit={createFamily}
    />
  );
}