import ClearIcon from "@mui/icons-material/Clear";
import {
  Alert,
  FormControl,
  FormControlLabel,
  FormLabel,
  IconButton,
  Paper,
  Radio,
  RadioGroup,
  Tab,
  Tabs,
} from "@mui/material";
import React from "react";
import { useParams } from "react-router-dom";
import {
  buildAscendingTree,
  buildDescendingTree,
} from "../../utils/family_tree";
import { useFamily } from "../../widgets/BaseFamilyRoute";
import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";

enum CurrTab {
  BasicTree,
  AdvancedTree,
}

enum TreeMode {
  Ascending,
  Descending,
}

export function FamilyMemberTreeRoute(): React.ReactElement {
  const { memberId } = useParams();

  const family = useFamily();

  const [currTab, setCurrTab] = React.useState(CurrTab.AdvancedTree);
  const [currMode, setCurrMode] = React.useState(TreeMode.Descending);

  const member = family.members.get(Number(memberId));

  const tree = React.useMemo(
    () =>
      !member
        ? null
        : currMode === TreeMode.Ascending
        ? buildAscendingTree(member.id, family.members, family.couples)
        : buildDescendingTree(member.id, family.members, family.couples),
    [member, currMode, family.members, family.couples]
  );

  if (!member) {
    return (
      <Alert severity="error">
        L'arbre ne peut pas être constuit : le membre n'existe pas !
      </Alert>
    );
  }

  return (
    <div
      style={{
        flex: "1",
        display: "flex",
        flexDirection: "column",
        marginBottom: "10px",
      }}
    >
      {/* parent bar */}
      <div style={{ display: "flex" }}>
        <MemberItem
          dense
          member={member}
          secondary={
            <RouterLink to={family.family.URL("tree")}>
              <IconButton>
                <ClearIcon />
              </IconButton>
            </RouterLink>
          }
        />
        <div style={{ flex: "10" }}></div>

        <FormControl>
          <FormLabel>Arbre</FormLabel>
          <RadioGroup
            row
            value={currMode}
            onChange={(_e, v) => setCurrMode(Number(v))}
          >
            <FormControlLabel
              value={TreeMode.Descending}
              control={<Radio />}
              label="Descendant"
            />
            <FormControlLabel
              value={TreeMode.Ascending}
              control={<Radio />}
              label="Ascendant"
            />
          </RadioGroup>
        </FormControl>

        <div style={{ flex: "2" }}></div>

        <Tabs
          value={currTab}
          onChange={(_e, v) => setCurrTab(v)}
          aria-label="basic tabs example"
        >
          <Tab tabIndex={CurrTab.BasicTree} label="Basique" />
          <Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" />
        </Tabs>
      </div>

      {/* the tree itself */}
      <Paper style={{ flex: "1" }}>
        {currTab === CurrTab.BasicTree ? (
          <BasicFamilyTree tree={tree!} />
        ) : (
          <ComplexFamilyTree
            tree={tree!}
            isUp={currMode === TreeMode.Ascending}
          />
        )}
      </Paper>
    </div>
  );
}