import ClearIcon from "@mui/icons-material/Clear";
import {
Alert,
FormControl,
FormControlLabel,
FormLabel,
IconButton,
InputLabel,
MenuItem,
Paper,
Radio,
RadioGroup,
Select,
Tab,
Tabs,
} from "@mui/material";
import React from "react";
import { useParams } from "react-router-dom";
import {
FamilyTreeNode,
buildAscendingTree,
buildDescendingTree,
treeHeight,
} from "../../utils/family_tree";
import { useFamily } from "../../widgets/BaseFamilyRoute";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink";
import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
import { SimpleFamilyTree } from "../../widgets/simple_family_tree/SimpleFamilyTree";
enum CurrTab {
BasicTree,
SimpleTree,
AdvancedTree,
}
enum TreeMode {
Ascending,
Descending,
}
export function FamilyMemberTreeRoute(): React.ReactElement {
const { memberId } = useParams();
const family = useFamily();
const [currTab, setCurrTab] = React.useState(CurrTab.SimpleTree);
const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
const member = family.members.get(Number(memberId));
const memo: [FamilyTreeNode, number] | null = React.useMemo(() => {
if (!member) return null;
const tree =
currMode === TreeMode.Ascending
? buildAscendingTree(member.id, family.members, family.couples)
: buildDescendingTree(member.id, family.members, family.couples);
return [tree, treeHeight(tree)];
}, [member, currMode, family.members, family.couples]);
const [currDepth, setCurrDepth] = React.useState(0);
if (!member) {
return (