import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";






type Crumb = {
  href: string;
  label: string;
};

type CrumbsSetter = (crumbs: Crumb[]) => void;

const useCrumbs = (crumb: Crumb, setCrumbs: CrumbsSetter) => {
  useEffect(() => {
    setCrumbs([crumb]);
    return () => setCrumbs([]);
  }, [crumb]);

  const crumbSetter = (crumbs: Crumb[]) => {
    setCrumbs([crumb, ...crumbs]);
  };

  return crumbSetter;
};






const TheMainPage = () => {
  const [crumbs, setCrumbs] = useState<Crumb[]>([]);

  const crumb = { href: "/", label: "Home" };
  const crumbSetter = useCrumbs(crumb, setCrumbs);

  return (
    <>
      <Crumbs crumbs={crumbs} />
      <Router>
        <Routes>
          <Route
            path={"/children"}
            element={<ChildList setCrumbs={crumbSetter} />}
          />
          <Route
            path={"/children/:id"}
            element={<ChildDetail setCrumbs={crumbSetter} />}
          />
        </Routes>
      </Router>
    </>
  );
};






type ChildListProps = {
  setCrumbs: CrumbsSetter;
};

const ChildList = ({ setCrumbs }: ChildListProps) => {
  const crumb = { href: "/children", label: "Children" };

  useCrumbs(crumb, setCrumbs);

  return <>Child List</>;
};

type ChildDetailProps = {
  setCrumbs: CrumbsSetter;
};

const ChildDetail = ({ setCrumbs }: ChildDetailProps) => {
  const { id } = useParams();
  const crumb = { href: `/children/${id}`, label: `Child ${id}` };

  const crumbSetter = useCrumbs(crumb, setCrumbs);

  return (
    <>
      Child {id}
      <Router>
        <Routes>
          <Route
            path={"/grandchildren"}
            element={<GrandChildList childId={id} setCrumbs={crumbSetter} />}
          />
          <Route
            path={"/grandchildren/:id"}
            element={<GrandChildDetail setCrumbs={crumbSetter} />}
          />
        </Routes>
      </Router>
    </>
  );
};






type GrandChildListProps = {
  childId: string;
  setCrumbs: CrumbsSetter;
};

const GrandChildList = ({ childId, setCrumbs }: GrandChildListProps) => {
  const crumb = {
    href: "/grandchildren",
    label: `Grandchildren for ${childId}`,
  };

  useCrumbs(crumb, setCrumbs);

  return <>Grandchild List for {childId}</>;
};

type GrandChildDetailProps = {
  setCrumbs: CrumbsSetter;
};

const GrandChildDetail = ({ setCrumbs }: GrandChildDetailProps) => {
  const { id } = useParams();
  const crumb = { href: `/grandchildren/${id}`, label: `Grandchild ${id}` };

  const crumbSetter = useCrumbs(crumb, setCrumbs);

  return (
    <>
      Grandchild {id}
      <Router>
        <Routes>
          <Route
            path={"/greatgrandchildren"}
            element={
              <GreatGrandChildList grandChildId={id} setCrumbs={crumbSetter} />
            }
          />
          <Route
            path={"/greatgrandchildren/:id"}
            element={<GreatGrandChildDetail setCrumbs={crumbSetter} />}
          />
        </Routes>
      </Router>
    </>
  );
};





type GreatGrandChildListProps = {
  grandChildId: string;
  setCrumbs: CrumbsSetter;
};

const GreatGrandChildList = ({ grandChildId, setCrumbs }: GreatGrandChildListProps) => {
  const crumb = {
    href: "/greatgrandchildren",
    label: `Greatgrandchildren for ${grandChildId}`,
  };

  useCrumbs(crumb, setCrumbs);

  return <>Greatgrandchild List for {grandChildId}</>;
};

type GreatGrandChildDetailProps = {
  setCrumbs: CrumbsSetter;
};

const GreatGrandChildDetail = ({ setCrumbs }: GreatGrandChildDetailProps) => {
  const { id } = useParams();
  const crumb = { href: `/greatgrandchildren/${id}`, label: `Greatgrandchild ${id}` };

  const crumbSetter = useCrumbs(crumb, setCrumbs);

  return (
    <>
      Greatgrandchild {id}
      <Router>
        <Routes>
          <Route
            path={"/greatgreatgrandchildren"}
            element={
              <GreatGreatGrandChildList greatGrandChildId={id} setCrumbs={crumbSetter} />
            }
          />
          <Route
            path={"/greatgreatgrandchildren/:id"}
            element={<GreatGreatGrandChildDetail setCrumbs={crumbSetter} />}
          />
        </Routes>
      </Router>
    </>
  );
};