import { Outlet, useParams } from "react-router-dom";
import { Family, FamilyApi } from "../api/FamilyApi";
import React from "react";
import { AsyncWidget } from "./AsyncWidget";

interface FamilyContext {
  family: Family;
  reloadFamilyInfo: () => void;
}

const FamilyContextK = React.createContext<FamilyContext | null>(null);

export function BaseFamilyRoute(): React.ReactElement {
  const { familyId } = useParams();

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

  const loadKey = React.useRef(1);

  const load = async () => {
    setFamily(await FamilyApi.GetSingle(Number(familyId)));
  };

  const onReload = () => {
    loadKey.current += 1;
    setFamily(null);
  };

  return (
    <AsyncWidget
      ready={family != null}
      loadKey={`${familyId}-${loadKey}`}
      load={load}
      errMsg="Échec du chargement des informations de la famille !"
      build={() => (
        <FamilyContextK.Provider
          value={{
            family: family!,
            reloadFamilyInfo: onReload,
          }}
        >
          <div>
            <p>base family route</p>
            <Outlet />
          </div>
        </FamilyContextK.Provider>
      )}
    />
  );
}

export function useFamily(): FamilyContext {
  return React.useContext(FamilyContextK)!;
}