GeneIT/geneit_app/src/routes/family/accommodations/AccommodationsSettingsRoute.tsx

import AddIcon from "@mui/icons-material/Add";
import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";
import {
  Button,
  Card,
  CardActions,
  CardContent,
  Typography,
} from "@mui/material";
import React from "react";
import {
  Accommodation,
  AccommodationListApi,
} from "../../../api/accommodations/AccommodationListApi";
import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../../../hooks/context_providers/ConfirmDialogProvider";
import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
import { useUpdateAccommodation } from "../../../hooks/context_providers/accommodations/UpdateAccommodationDialogProvider";
import { useFamily } from "../../../widgets/BaseFamilyRoute";
import { FamilyCard } from "../../../widgets/FamilyCard";
import { TimeWidget } from "../../../widgets/TimeWidget";
import { useAccommodations } from "../../../widgets/accommodations/BaseAccommodationsRoute";
import { useCreateAccommodationCalendarURL } from "../../../hooks/context_providers/accommodations/CreateAccommodationCalendarURLDialogProvider";
import { AccommodationsCalendarURLApi } from "../../../api/accommodations/AccommodationsCalendarURLApi";
import { useInstallCalendarDialog } from "../../../hooks/context_providers/accommodations/InstallCalendarDialogProvider";
import { InstallCalendarDialog } from "../../../dialogs/accommodations/InstallCalendarDialog";

export function AccommodationsSettingsRoute(): React.ReactElement {
  return (
    <>
      <AccommodationsListCard />
      <AccommodationsCalURLsCard />
    </>
  );
}

function AccommodationsListCard(): React.ReactElement {
  const loading = useLoadingMessage();
  const confirm = useConfirm();
  const snackbar = useSnackbar();

  const family = useFamily();
  const accommodations = useAccommodations();

  const [error, setError] = React.useState<string>();
  const [success, setSuccess] = React.useState<string>();

  const updateAccommodation = useUpdateAccommodation();

  const createAccommodation = async () => {
    setError(undefined);
    setSuccess(undefined);
    try {
      const accommodation = await updateAccommodation(
        {
          name: "",
          open_to_reservations: true,
          need_validation: false,
        },
        true
      );

      if (!accommodation) return;

      loading.show("Création du logement en cours...");

      await AccommodationListApi.Create(family.family, accommodation);

      snackbar("Le logement a été créé avec succès !");
      await accommodations.reloadAccommodationsList();
    } catch (e) {
      console.error("Failed to create accommodation!", e);
      setError(`Échec de la création du logement! ${e}`);
    } finally {
      loading.hide();
    }
  };

  const requestUpdateAccommodation = async (a: Accommodation) => {
    setError(undefined);
    setSuccess(undefined);
    try {
      const update = await updateAccommodation(a, false);
      if (!update) return;

      loading.show("Mise à jour du logement en cours...");

      await AccommodationListApi.Update(a, update);

      snackbar("Le logement a été créé avec succès !");
      await accommodations.reloadAccommodationsList();
    } catch (e) {
      console.error("Failed to update accommodation!", e);
      setError(`Échec de la mise à jour du logement! ${e}`);
    } finally {
      loading.hide();
    }
  };

  const deleteAccommodation = async (a: Accommodation) => {
    setError(undefined);
    setSuccess(undefined);
    try {
      if (
        !(await confirm(
          `Voulez-vous vraiment supprimer le logement '${a.name}' ? Cette opération est définitive !`
        ))
      )
        return;
      loading.show("Suppression du logement en cours...");

      await AccommodationListApi.Delete(a);

      snackbar("Le logement a été supprimé avec succès !");
      await accommodations.reloadAccommodationsList();
    } catch (e) {
      console.error("Failed to delete accommodation!", e);
      setError(`Échec de la suppression du logement! ${e}`);
    } finally {
      loading.hide();
    }
  };

  return (
    <FamilyCard error={error} success={success} style={{ width: "350px" }}>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Logements
        </Typography>

        {/* Display the list of accommodations */}
        {accommodations.accommodations.isEmpty && (
          <div style={{ textAlign: "center", margin: "25px" }}>
            Aucun logement enregistré pour le moment !
          </div>
        )}
        {accommodations.accommodations.fullList.map((a) => (
          <AccommodationCard
            accommodation={a}
            onRequestUpdate={requestUpdateAccommodation}
            onRequestDelete={deleteAccommodation}
          />
        ))}

        {family.family.is_admin && (
          <Button
            startIcon={<AddIcon />}
            variant="outlined"
            color="info"
            fullWidth
            onClick={createAccommodation}
            size={"large"}
          >
            Ajouter un logement
          </Button>
        )}
      </CardContent>
    </FamilyCard>
  );
}

function AccommodationCard(p: {
  accommodation: Accommodation;
  onRequestUpdate: (a: Accommodation) => void;
  onRequestDelete: (a: Accommodation) => void;
}): React.ReactElement {
  const family = useFamily();
  return (
    <Card sx={{ minWidth: 275, margin: "10px 0px" }} variant="outlined">
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          Mis à jour il y a <TimeWidget time={p.accommodation.time_update} />
        </Typography>
        <Typography variant="h5" component="div">
          {p.accommodation.name}
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          {p.accommodation.description}
        </Typography>
        <Typography variant="body2">
          <BoolIcon checked={p.accommodation.open_to_reservations} /> Ouvert aux
          réservations
          <br />
          <BoolIcon checked={!p.accommodation.need_validation} /> Réservation
          sans validation d'un administrateur
        </Typography>
      </CardContent>
      {family.family.is_admin && (
        <CardActions>
          <span style={{ flex: 1 }}></span>
          <Button
            size="small"
            onClick={() => p.onRequestUpdate(p.accommodation)}
          >
            Modifier
          </Button>
          <Button
            size="small"
            color="error"
            onClick={() => p.onRequestDelete(p.accommodation)}
          >
            Supprimer
          </Button>
        </CardActions>
      )}
    </Card>
  );
}

function BoolIcon(p: { checked?: boolean }): React.ReactElement {
  return p.checked ? (
    <CheckIcon color="success" />
  ) : (
    <CloseIcon color="error" />
  );
}

function AccommodationsCalURLsCard(): React.ReactElement {
  const loading = useLoadingMessage();

  const [error, setError] = React.useState<string>();
  const [success, setSuccess] = React.useState<string>();

  const family = useFamily();

  const createCalendarURLDialog = useCreateAccommodationCalendarURL();
  const calendarURLDialog = useInstallCalendarDialog();

  const createCalendarURL = async () => {
    try {
      const newCal = await createCalendarURLDialog();

      if (!newCal) return;

      loading.show("Création du logement en cours...");

      const cal = await AccommodationsCalendarURLApi.Create(
        family.family,
        newCal
      );

      setSuccess("Le calendrier a été créé avec succès !");

      // TODO : reload URLS list

      calendarURLDialog(cal);
    } catch (e) {
      console.error("Failed to create new accommodation calendar URL!", e);
      setError(`Échec de la création du calendrier! ${e}`);
    } finally {
      loading.hide();
    }
  };

  return (
    <FamilyCard error={error} success={success} style={{ width: "350px" }}>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          URL de calendriers
        </Typography>
        <Typography>
          Vous pouvez, si vous le souhaitez, importer dans votre application de
          calendrier le planning de réservation des logement. Pour ce faire, il
          vous suffit de créer une URL de calendrier.
        </Typography>

        <Button
          startIcon={<AddIcon />}
          variant="outlined"
          color="info"
          fullWidth
          onClick={createCalendarURL}
          size={"large"}
        >
          Créer un calendrier
        </Button>
      </CardContent>
    </FamilyCard>
  );
}