import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Tooltip,
} from "@mui/material";
import React from "react";
import { ServerApi } from "../../api/ServerApi";
import { UpdateAccommodation } from "../../api/accommodations/AccommodationListApi";
import { checkConstraint } from "../../utils/form_utils";
import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
import { PropEdit } from "../../widgets/forms/PropEdit";
import { PropColorPicker } from "../../widgets/forms/PropColorPicker";

export function UpdateAccommodationDialog(p: {
  open: boolean;
  create: boolean;
  onClose: () => void;
  onSubmitted: (c: UpdateAccommodation) => void;
  accommodation: UpdateAccommodation | undefined;
}): React.ReactElement {
  const [accommodation, setAccommodation] = React.useState<
    UpdateAccommodation | undefined
  >();

  const nameErr = checkConstraint(
    ServerApi.Config.constraints.accommodation_name_len,
    accommodation?.name
  );
  const descriptionErr = checkConstraint(
    ServerApi.Config.constraints.accommodation_description_len,
    accommodation?.description
  );

  const clearForm = () => {
    setAccommodation(undefined);
  };

  const cancel = () => {
    clearForm();
    p.onClose();
  };

  const submit = async () => {
    clearForm();
    p.onSubmitted(accommodation!);
  };

  React.useEffect(() => {
    if (!accommodation) setAccommodation(p.accommodation);
  }, [p.open, p.accommodation]);

  return (
    <Dialog open={p.open} onClose={cancel}>
      <DialogTitle>
        {p.create ? "Création" : "Mise à jour"} d'un logement
      </DialogTitle>
      <DialogContent style={{ display: "flex", flexDirection: "column" }}>
        <PropEdit
          editable
          label="Nom"
          value={accommodation?.name}
          onValueChange={(s) =>
            setAccommodation((a) => {
              return {
                ...a!,
                name: s!,
              };
            })
          }
          size={ServerApi.Config.constraints.accommodation_name_len}
          helperText={nameErr}
        />

        <PropEdit
          editable
          label="Description"
          value={accommodation?.description}
          onValueChange={(s) =>
            setAccommodation((a) => {
              return {
                ...a!,
                description: s!,
              };
            })
          }
          size={ServerApi.Config.constraints.accommodation_description_len}
          helperText={descriptionErr}
        />

        <PropColorPicker
          editable
          label="Couleur"
          value={accommodation?.color}
          onChange={(s) =>
            setAccommodation((a) => {
              return {
                ...a!,
                color: s!,
              };
            })
          }
        />

        <PropCheckbox
          editable
          label="Ouvert aux réservations"
          checked={accommodation?.open_to_reservations === true}
          onValueChange={(c) =>
            setAccommodation((a) => {
              return {
                ...a!,
                open_to_reservations: c,
              };
            })
          }
        />

        <Tooltip
          title={
            "Permet de spécifier si un administrateur de la famille doit valider manuellement les demandes de réservation pour qu'elles soient validées"
          }
        >
          <PropCheckbox
            checkboxAlwaysVisible
            editable={accommodation?.open_to_reservations === true}
            label="Validation des réservations par un administrateur requise"
            checked={accommodation?.need_validation === true}
            onValueChange={(c) =>
              setAccommodation((a) => {
                return {
                  ...a!,
                  need_validation: c,
                };
              })
            }
          />
        </Tooltip>
      </DialogContent>
      <DialogActions>
        <Button onClick={cancel}>Annuler</Button>
        <Button
          onClick={submit}
          disabled={
            !!nameErr || (!!accommodation?.description && !!descriptionErr)
          }
        >
          {p.create ? "Créer" : "Mettre à jour"}
        </Button>
      </DialogActions>
    </Dialog>
  );
}