import ClearIcon from "@mui/icons-material/Clear";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import FileDownloadIcon from "@mui/icons-material/FileDownload";
import SaveIcon from "@mui/icons-material/Save";
import { Button, Grid, Stack } from "@mui/material";
import * as EmailValidator from "email-validator";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Member, MemberApi } from "../../api/MemberApi";
import { ServerApi } from "../../api/ServerApi";
import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
import { AsyncWidget } from "../../widgets/AsyncWidget";
import { useFamily } from "../../widgets/BaseFamilyRoute";
import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
import { MemberPhoto } from "../../widgets/MemberPhoto";
import { PropertiesBox } from "../../widgets/PropertiesBox";
import { RouterLink } from "../../widgets/RouterLink";
import { DateInput } from "../../widgets/forms/DateInput";
import { MemberInput } from "../../widgets/forms/MemberInput";
import { PropCheckbox } from "../../widgets/forms/PropCheckbox";
import { PropEdit } from "../../widgets/forms/PropEdit";
import { PropSelect } from "../../widgets/forms/SelectInput";
import { SexSelection } from "../../widgets/forms/SexSelection";
import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";

/**
 * Create a new member route
 */
export function FamilyCreateMemberRoute(): React.ReactElement {
  const alert = useAlert();
  const snackbar = useSnackbar();

  const [shouldQuit, setShouldQuit] = React.useState(false);
  const n = useNavigate();
  const family = useFamily();

  const create = async (m: Member) => {
    try {
      const r = await MemberApi.Create(m);

      await family.reloadMembersList();

      setShouldQuit(true);
      n(family.family.URL(`member/${r.id}`));
      snackbar(`La fiche pour ${r.fullName} a été créée avec succès !`);
    } catch (e) {
      console.error(e);
      alert("Echec de la création de la personne !");
    }
  };

  const cancel = () => {
    setShouldQuit(true);
    n(family.family.URL("members"));
  };

  return (
    <MemberPage
      member={Member.New(family.family.family_id)}
      creating={true}
      editing={true}
      onCancel={cancel}
      onSave={create}
      shouldAllowLeaving={shouldQuit}
    />
  );
}

/**
 * Get existing member route
 */
export function FamilyMemberRoute(): React.ReactElement {
  const count = React.useRef(1);

  const n = useNavigate();
  const alert = useAlert();
  const confirm = useConfirm();
  const snackbar = useSnackbar();

  const family = useFamily();
  const { memberId } = useParams();

  const [member, setMember] = React.useState<Member>();
  const load = async () => {
    setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
  };

  const forceReload = async () => {
    count.current += 1;
    setMember(undefined);

    await family.reloadMembersList();
  };

  const deleteMember = async () => {
    try {
      if (
        !(await confirm(
          "Voulez-vous vraiment supprimer cette fiche membre ? L'opération n'est pas réversible !"
        ))
      )
        return;

      await MemberApi.Delete(member!);

      snackbar("La fiche de membre a été supprimée avec succès !");
      n(family.family.URL("members"));

      await family.reloadMembersList();
    } catch (e) {
      console.error(e);
      alert("Échec de la suppression du membre !");
    }
  };

  return (
    <AsyncWidget
      loadKey={`${memberId}-${count.current}`}
      load={load}
      ready={member !== undefined}
      errMsg="Echec du chargement des informations du membre"
      build={() => (
        <MemberPage
          member={member!}
          creating={false}
          editing={false}
          onRequestDelete={deleteMember}
          onRequestEdit={() =>
            n(family.family.URL(`member/${member!.id}/edit`))
          }
          onForceReload={forceReload}
        />
      )}
    />
  );
}

/**
 * Edit existing member route
 */
export function FamilyEditMemberRoute(): React.ReactElement {
  const n = useNavigate();
  const alert = useAlert();
  const snackbar = useSnackbar();

  const [shouldQuit, setShouldQuit] = React.useState(false);

  const family = useFamily();
  const { memberId } = useParams();

  const [member, setMember] = React.useState<Member>();
  const load = async () => {
    setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
  };

  const cancel = () => {
    setShouldQuit(true);
    n(family.family.URL(`member/${member!.id}`));
  };

  const save = async (m: Member) => {
    try {
      await MemberApi.Update(m);

      snackbar("Les informations du membre ont été mises à jour avec succès !");

      await family.reloadMembersList();

      setShouldQuit(true);
      n(family.family.URL(`member/${member!.id}`));
    } catch (e) {
      console.error(e);
      alert("Échec de la mise à jour des informations du membre !");
    }
  };

  return (
    <AsyncWidget
      loadKey={memberId}
      load={load}
      errMsg="Échec du chargement des informations du membre"
      build={() => (
        <MemberPage
          member={member!}
          creating={false}
          editing={true}
          onCancel={cancel}
          onSave={save}
          shouldAllowLeaving={shouldQuit}
        />
      )}
    />
  );
}

export function MemberPage(p: {
  member: Member;
  editing: boolean;
  creating: boolean;
  shouldAllowLeaving?: boolean;
  onCancel?: () => void;
  onSave?: (m: Member) => void;
  onRequestEdit?: () => void;
  onRequestDelete?: () => void;
  onForceReload?: () => void;
}): React.ReactElement {
  const confirm = useConfirm();
  const snackbar = useSnackbar();

  const [changed, setChanged] = React.useState(false);
  const [member, setMember] = React.useState(
    new Member(structuredClone(p.member))
  );

  const updatedMember = () => {
    setChanged(true);
    setMember(new Member(structuredClone(member)));
  };

  const save = () => {
    p.onSave!(member);
  };

  const cancel = async () => {
    if (
      changed &&
      !(await confirm(
        "Voulez-vous vraiment retirer les modifications apportées ? Celles-ci seront perdues !"
      ))
    )
      return;

    p.onCancel!();
  };

  const uploadNewPhoto = async (b: Blob) => {
    await MemberApi.SetMemberPhoto(member, b);
    snackbar("La photo du membre a été mise à jour avec succès !");
    p.onForceReload?.();
  };

  const deletePhoto = async () => {
    try {
      if (!(await confirm("Voulez-vous supprimer cette photo ?"))) return;

      await MemberApi.RemoveMemberPhoto(member);

      snackbar("La photo du membre a été supprimée avec succès !");
      p.onForceReload?.();
    } catch (e) {
      console.error(e);
      alert("Échec de la suppresion de la photo !");
    }
  };

  return (
    <div style={{ maxWidth: "2000px", margin: "auto" }}>
      <ConfirmLeaveWithoutSaveDialog
        shouldBlock={changed && p.shouldAllowLeaving !== true}
      />
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <FamilyPageTitle
          title={
            (p.editing
              ? p.creating
                ? "Création"
                : "Édition"
              : "Visualisation") + " d'une fiche de membre"
          }
        />
        <Stack direction="row" spacing={1}>
          {/* Edit button */}
          {p.onRequestEdit && (
            <Button
              variant="outlined"
              startIcon={<EditIcon />}
              onClick={p.onRequestEdit}
              size="large"
            >
              Editer
            </Button>
          )}

          {/* Delete button */}
          {p.onRequestDelete && (
            <Button
              variant="outlined"
              startIcon={<DeleteIcon />}
              onClick={p.onRequestDelete}
              size="large"
              color="error"
            >
              Supprimer
            </Button>
          )}

          {/* Save button */}
          {p.editing && changed && (
            <Button
              variant={"contained"}
              startIcon={<SaveIcon />}
              onClick={save}
              size="large"
            >
              Enregistrer
            </Button>
          )}

          {/* Cancel button */}
          {p.editing && (
            <Button
              variant="outlined"
              startIcon={<ClearIcon />}
              onClick={cancel}
              size="small"
            >
              Annuler les modifications
            </Button>
          )}
        </Stack>
      </div>

      <Grid container spacing={2}>
        {/* General info */}
        <Grid item sm={12} md={6}>
          <PropertiesBox title="Informations générales">
            {/* Sex */}
            <SexSelection
              readonly={!p.editing}
              current={member.sex}
              onChange={(v) => {
                member.sex = v;
                updatedMember();
              }}
            />

            {/* First name */}
            <PropEdit
              label="Prénom"
              editable={p.editing}
              value={member.first_name}
              onValueChange={(v) => {
                member.first_name = v;
                updatedMember();
              }}
              size={ServerApi.Config.constraints.member_first_name}
            />

            {/* Last name */}
            <PropEdit
              label="Nom"
              editable={p.editing}
              value={member.last_name}
              onValueChange={(v) => {
                member.last_name = v;
                updatedMember();
              }}
              size={ServerApi.Config.constraints.member_last_name}
            />

            {/* Birth last name */}
            <PropEdit
              label="Nom de naissance"
              editable={p.editing}
              value={member.birth_last_name}
              onValueChange={(v) => {
                member.birth_last_name = v;
                updatedMember();
              }}
              size={ServerApi.Config.constraints.member_birth_last_name}
            />

            {/* Birth day */}
            <DateInput
              label="Date de naissance"
              editable={p.editing}
              id="dob"
              value={member.dateOfBirth}
              onValueChange={(d) => {
                member.birth_year = d.year;
                member.birth_month = d.month;
                member.birth_day = d.day;
                updatedMember();
              }}
            />

            {/* Is dead */}
            <PropCheckbox
              checked={member.dead}
              editable={p.editing}
              label={member.sex === "F" ? "Décédée" : "Décédé"}
              onValueChange={(v) => {
                member.dead = v;
                updatedMember();
              }}
            />

            {/* Death day */}
            <DateInput
              label="Date de décès"
              editable={p.editing}
              id="dod"
              value={member.dateOfDeath}
              onValueChange={(d) => {
                member.death_year = d.year;
                member.death_month = d.month;
                member.death_day = d.day;
                updatedMember();
              }}
            />

            {/* Father */}
            <br />
            <MemberInput
              editable={p.editing}
              label="Père"
              onValueChange={(m) => {
                member.father = m;
                updatedMember();
              }}
              filter={(m) =>
                (m.sex === "M" || m.sex === undefined) && m.id !== member.id
              }
              current={member.father}
            />

            {/* Mother */}
            <br />
            <MemberInput
              editable={p.editing}
              label="Mère"
              onValueChange={(m) => {
                member.mother = m;
                updatedMember();
              }}
              filter={(m) =>
                (m.sex === "F" || m.sex === undefined) && m.id !== member.id
              }
              current={member.mother}
            />
          </PropertiesBox>
        </Grid>

        {/* Photo */}
        <Grid item sm={12} md={6}>
          <PropertiesBox title="Photo">
            <div style={{ textAlign: "center" }}>
              <MemberPhoto member={member} width={150} />
              <br />
              {p.editing ? (
                <p>
                  Veuillez enregistrer / annuler les modifications apportées à
                  la fiche avant de changer la photo du membre.
                </p>
              ) : (
                <>
                  <UploadPhotoButton
                    label={member.hasPhoto ? "Remplacer" : "Ajouter"}
                    onPhotoSelected={uploadNewPhoto}
                  />{" "}
                  {member.hasPhoto && (
                    <RouterLink to={member.photoURL!} target="_blank">
                      <Button
                        variant="outlined"
                        startIcon={<FileDownloadIcon />}
                      >
                        Télécharger
                      </Button>
                    </RouterLink>
                  )}{" "}
                  {member.hasPhoto && (
                    <Button
                      variant="outlined"
                      startIcon={<DeleteIcon />}
                      color="error"
                      onClick={deletePhoto}
                    >
                      Supprimer
                    </Button>
                  )}
                </>
              )}{" "}
            </div>
          </PropertiesBox>
        </Grid>

        {/* Contact */}
        {(p.editing || member.hasContactInfo) && (
          <Grid item sm={12} md={6}>
            <PropertiesBox title="Contact">
              {/* Email */}
              <PropEdit
                label="Adresse mail"
                editable={p.editing}
                value={member.email}
                onValueChange={(v) => {
                  member.email = v;
                  updatedMember();
                }}
                size={ServerApi.Config.constraints.member_email}
                checkValue={(e) => EmailValidator.validate(e)}
              />

              {/* Phone number */}
              <PropEdit
                label="Téléphone"
                editable={p.editing}
                value={member.phone}
                onValueChange={(v) => {
                  member.phone = v;
                  updatedMember();
                }}
                size={ServerApi.Config.constraints.member_phone}
              />

              {/* Country */}
              <PropSelect
                label="Pays"
                editing={p.editing}
                onValueChange={(o) => {
                  member.country = o;
                  updatedMember();
                }}
                value={member.country}
                options={ServerApi.Config.countries.map((c) => {
                  return { label: c.fr, value: c.code };
                })}
              />
            </PropertiesBox>
          </Grid>
        )}

        {/* Bio */}
        <Grid item sm={12} md={6}>
          <PropertiesBox title="Biographie">TODO</PropertiesBox>
        </Grid>

        {/* Spouse */}
        <Grid item sm={12} md={6}>
          <PropertiesBox title={member.sex === "F" ? "Époux" : "Épouse"}>
            TODO
          </PropertiesBox>
        </Grid>

        {/* Children */}
        <Grid item sm={12} md={6}>
          <PropertiesBox title="Enfants">TODO</PropertiesBox>
        </Grid>
      </Grid>
    </div>
  );
}