import { useNavigate } from "react-router-dom";
import { useFamily } from "../../../widgets/BaseFamilyRoute";
import { MemberInput } from "../../../widgets/forms/MemberInput";

export function FamilyTreeRoute(): React.ReactElement {
  const n = useNavigate();

  const family = useFamily();

  const onMemberSelected = (id: number | undefined) => {
    if (id) n(family.family.familyTreeURL(id));
  };

  return (
    <div
      style={{
        flex: "1",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div style={{ maxWidth: "450px", textAlign: "center" }}>
        <p>
          Veuillez sélectionner la personne à partir de laquelle vous souhaitez
          constuire l'arbre généalogique de votre famille :
        </p>

        <MemberInput
          editable={true}
          onValueChange={onMemberSelected}
          label={"Membre"}
          filter={() => true}
        />
      </div>
    </div>
  );
}