ca-lose/frontend/src/pages/MainForm.tsx

import {
  TextField,
  FormControlLabel,
  Checkbox,
  Button,
  Alert,
  CircularProgress,
  Autocomplete,
  Chip,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState, useEffect } from "react";
import { submitFormData } from "../utils/sender";
import Cookies from "js-cookie";

interface Message {
  type: "error" | "info" | "success" | "warning";
  headline: string;
  text: string;
}

export const MainForm = () => {
  const { t } = useTranslation();
  const [invoice, setInvoice] = useState(false);
  const [msg, setMsg] = useState<Message | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [nextID, setNextID] = useState<number | null>(null);
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phoneNumber: "",
    tickets: 1,
    companyName: "",
    cmpFirstName: "",
    cpmLastName: "",
    cpmEmail: "",
    cpmPhoneNumber: "",
    street: "",
    postalCode: "",
    paymentMethod: "",
  });
  const [users, setUsers] = useState<string[]>([]);
  const [selectedUser, setSelectedUser] = useState<string | null>(null);

  useEffect(() => {
    // Fetch user data or any other data needed for the form
    try {
      const fetchUsers = async () => {
        const response = await fetch("http://localhost:8004/default/users");
        const data = await response.json();
        setUsers(data.users);
      };
      fetchUsers();
      console.log(users);
    } catch (error) {
      setMsg({
        type: "error",
        headline: t("error"),
        text: t("failed-to-load-users"),
      });
      console.error("Error fetching users:", error);
    }

    if (Cookies.get("selectedUser")) {
      const cookieUser = Cookies.get("selectedUser")!;
      setSelectedUser(cookieUser);
      confirmUser(cookieUser);
    }
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const confirmUser = async (selectedUser: string) => {
    try {
      const response = await fetch(
        `http://localhost:8004/default/confirm-user?username=${selectedUser}`
      );
      const data = await response.json();
      setNextID(data.nextID);
    } catch (error) {
      console.error("Error confirming user:", error);
    }
  };

  const handleUserSelection = (selectedUser: string | null) => {
    if (!selectedUser) return;
    setSelectedUser(selectedUser);
    confirmUser(selectedUser);
    Cookies.set("selectedUser", selectedUser);
  };

  const handleSubmit = async () => {
    setIsLoading(true);
    try {
      const result = await submitFormData(formData);
      if (result.success) {
        setMsg({
          type: "success",
          headline: t("success"),
          text: t("form-submitted-successfully"),
        });
      } else {
        setMsg({
          type: "error",
          headline: t("error"),
          text: result.error || t("form-submission-failed"),
        });
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <Chip label={`${t("next-id")}#${nextID ?? "N/A"}`} />
      <form
        onSubmit={(e) => {
          e.preventDefault();
          handleSubmit();
        }}
      >
        <Autocomplete
          disablePortal
          options={users}
          value={selectedUser}
          sx={{ width: 300 }}
          renderInput={(params) => <TextField {...params} label={t("user")} />}
          onChange={(_event, value) => handleUserSelection(value)}
          onKeyDown={(event) => {
            if (event.key === "Enter") {
              event.defaultMuiPrevented = true;
            }
          }}
        />
        <TextField
          required
          id="first-name"
          label={t("first-name")}
          variant="filled"
          value={formData.firstName}
          onChange={handleChange}
          name="firstName"
        />
        <TextField
          required
          id="last-name"
          label={t("last-name")}
          variant="filled"
          value={formData.lastName}
          onChange={handleChange}
          name="lastName"
        />
        <TextField
          required
          id="email"
          label={t("email")}
          variant="filled"
          type="email"
          value={formData.email}
          onChange={handleChange}
          name="email"
        />
        <TextField
          required
          id="phone-number"
          label={t("phone-number")}
          variant="filled"
          type="tel"
          value={formData.phoneNumber}
          onChange={handleChange}
          name="phoneNumber"
        />
        <TextField
          required
          id="tickets"
          type="number"
          label={t("tickets")}
          variant="filled"
          value={formData.tickets}
          onChange={handleChange}
          name="tickets"
        />
        <FormControlLabel
          control={
            <Checkbox
              checked={invoice}
              onChange={(e) => setInvoice(e.target.checked)}
            />
          }
          label={t("invoice")}
        />
        {invoice && (
          <>
            <TextField
              required
              id="company-name"
              label={t("company-name")}
              variant="filled"
              value={formData.companyName}
              onChange={handleChange}
              name="companyName"
            />
            <TextField
              required
              id="first-name_invoice"
              label={t("first-name")}
              variant="filled"
              value={formData.cmpFirstName}
              onChange={handleChange}
              name="cmpFirstName"
            />
            <TextField
              required
              id="last-name_invoice"
              label={t("last-name")}
              variant="filled"
              value={formData.cpmLastName}
              onChange={handleChange}
              name="cpmLastName"
            />
            <TextField
              required
              id="street"
              label={t("street")}
              variant="filled"
              value={formData.street}
              onChange={handleChange}
              name="street"
            />
            <TextField
              required
              id="postal-code"
              label={t("postal-code")}
              variant="filled"
              value={formData.postalCode}
              onChange={handleChange}
              name="postalCode"
            />
            <TextField
              required
              id="phone-number_invoice"
              label={t("phone-number")}
              variant="filled"
              type="tel"
              value={formData.cpmPhoneNumber}
              onChange={handleChange}
              name="cpmPhoneNumber"
            />
            <TextField
              required
              id="email_invoice"
              label={t("email")}
              variant="filled"
              type="email"
              value={formData.cpmEmail}
              onChange={handleChange}
              name="cpmEmail"
            />
          </>
        )}
        {/* Payment methods - only one must be selected */}
        <FormControlLabel control={<Checkbox />} label={t("cash")} />
        <FormControlLabel control={<Checkbox />} label={t("paypal")} />
        <FormControlLabel control={<Checkbox />} label={t("transfer")} />
        {isLoading && <CircularProgress />}
        <Button type="submit" variant="contained" disabled={isLoading}>
          {t("submit")}
        </Button>

        {msg && (
          <Alert severity={msg.type}>
            {msg.headline}: {msg.text}
          </Alert>
        )}
      </form>
    </>
  );
};