import React from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { Family } from "../api/FamilyApi";
import { Button, Typography } from "@mui/material";
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";

export function FamiliesListRoute(): React.ReactElement {
  const loadKey = React.useRef(1);

  const [families, setFamilies] = React.useState<Family[] | null>(null);

  const [createFamily, setCreateFamily] = React.useState(false);

  const load = async () => {
    // TODO : implement
    setFamilies([]);
  };

  const reload = () => {
    loadKey.current += 1;
  };

  const onRequestCreateFamily = async () => {
    setCreateFamily(true);
  };

  return (
    <AsyncWidget
      loadKey={loadKey.current}
      load={load}
      errMsg="Echec du chargement de la liste des familles"
      build={() => (
        <>
          {families!!.length === 0 ? (
            <NoFamilyWidget onRequestCreateFamily={onRequestCreateFamily} />
          ) : (
            <HasFamilysWidget onReload={reload} families={families!} />
          )}

          {/** Create family dialog anchor */}
          <CreateFamilyDialog
            open={createFamily}
            onClose={() => setCreateFamily(false)}
            onCreated={() => {
              setCreateFamily(false);
              reload();
            }}
          />
        </>
      )}
    />
  );
}

function NoFamilyWidget(p: {
  onRequestCreateFamily: () => void;
}): React.ReactElement {
  return (
    <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
      <Typography variant="h3" style={{ flex: 1, textAlign: "center" }}>
        Vous n'appartenez à aucune famille !
      </Typography>

      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <NoFamilyButton
          label="Créer une famille"
          onClick={p.onRequestCreateFamily}
        />

        <NoFamilyButton label="Rejoindre une famille" onClick={() => {}} />
      </div>
    </div>
  );
}

function NoFamilyButton(p: {
  label: string;
  onClick: () => void;
}): React.ReactElement {
  return (
    <Button
      variant="outlined"
      size="large"
      style={{ width: "300px", marginBottom: "10px" }}
      onClick={p.onClick}
    >
      {p.label}
    </Button>
  );
}

function HasFamilysWidget(p: {
  families: Family[];
  onReload: () => void;
}): React.ReactElement {
  return <p>todo has families</p>;
}