// 頁面加載完不會觸發(fā) hashchange，這里主動觸發(fā)一次 hashchange 事件，處理默認hash
window.addEventListener('DOMContentLoaded', onLoad);
// 監(jiān)聽路由變化
window.addEventListener('hashchange', onHashChange);
// 路由變化時，根據路由渲染對應 UI
function onHashChange() {
  switch (location.hash) {
    case '#/home':
      routerView.innerHTML = 'This is Home';
      return;
    case '#/about':
      routerView.innerHTML = 'This is About';
      return;
    case '#/list':
      routerView.innerHTML = 'This is List';
      return;
    default:
      routerView.innerHTML = 'Not Found';
      return;
  }
}

var _wr = function (type) {
  var orig = history[type];
  return function () {
    var e = new Event(type);
    e.arguments = arguments;
    var rv = orig.apply(this, arguments);
    window.dispatchEvent(e);
    return rv;
  };
};
// 重寫pushstate事件
history.pushState = _wr('pushstate');
function onLoad() {
  routerView = document.querySelector('#routeView');
  onPopState();
  // 攔截 <a> 標簽點擊事件默認行為
  // 點擊時使用 pushState 修改 URL并更新手動 UI，從而實現點擊鏈接更新 URL 和 UI 的效果。
  var linkList = document.querySelectorAll('a[href]');
  linkList.forEach((el) =>
    el.addEventListener('click', function (e) {
      e.preventDefault();
      history.pushState(null, '', el.getAttribute('href'));
      onPopState();
    }),
  );
}
// 監(jiān)聽pushstate方法
window.addEventListener('pushstate', onPopState());
// 頁面加載完不會觸發(fā) hashchange，這里主動觸發(fā)一次 popstate 事件，處理默認pathname
window.addEventListener('DOMContentLoaded', onLoad);
// 監(jiān)聽路由變化
window.addEventListener('popstate', onPopState);
// 路由變化時，根據路由渲染對應 UI
function onPopState() {
  switch (location.pathname) {
    case '/home':
      routerView.innerHTML = 'This is Home';
      return;
    case '/about':
      routerView.innerHTML = 'This is About';
      return;
    case '/list':
      routerView.innerHTML = 'This is List';
      return;
    default:
      routerView.innerHTML = 'Not Found';
      return;
  }
}

// 創(chuàng)建和管理listeners的方法
export const EventEmitter = () => {
  const events = [];
  return {
    subscribe(fn) {
      events.push(fn);
      return function () {
        events = events.filter((handler) => handler !== fn);
      };
    },
    emit(arg) {
      events.forEach((fn) => fn && fn(arg));
    },
  };
};

const createBrowserHistory = () => {
  const EventBus = EventEmitter();
  // 初始化location
  let location = {
    pathname: '/',
  };
  // 路由變化時的回調
  const handlePop = function () {
    const currentLocation = {
      pathname: window.location.pathname,
    };
    EventBus.emit(currentLocation); // 路由變化時執(zhí)行回調
  };
  // 定義history.push方法
  const push = (path) => {
    const history = window.history;
    // 為了保持state棧的一致性
    history.pushState(null, '', path);
    // 由于push并不觸發(fā)popstate，我們需要手動調用回調函數
    location = { pathname: path };
    EventBus.emit(location);
  };
  const listen = (listener) => EventBus.subscribe(listener);
  // 處理瀏覽器的前進后退
  window.addEventListener('popstate', handlePop);
  // 返回history
  const history = {
    location,
    listen,
    push,
  };
  return history;
};

const createHashHistory = () => {
  const EventBus = EventEmitter();
  let location = {
    pathname: '/',
  };
  // 路由變化時的回調
  const handlePop = function () {
    const currentLocation = {
      pathname: window.location.hash.slice(1),
    };
    EventBus.emit(currentLocation); // 路由變化時執(zhí)行回調
  };
  // 不用手動執(zhí)行回調，因為hash改變會觸發(fā)hashchange事件
  const push = (path) => (window.location.hash = path);
  const listen = (listener: Function) => EventBus.subscribe(listener);
  // 監(jiān)聽hashchange事件
  window.addEventListener('hashchange', handlePop);
  // 返回的history上有個listen方法
  const history = {
    location,
    listen,
    push,
  };
  return history;
};

function Router(props: IProps) {
  const { navigator, children, location } = props;
  const navigationContext = React.useMemo(() => ({ navigator }), [navigator]);
  const { pathname } = location;
  const locationContext = React.useMemo(
    () => ({ location: { pathname } }),
    [pathname],
  );
  return (
    <NavigationContext.Provider value={navigationContext}>
      <LocationContext.Provider value={locationContext} children={children} />
    </NavigationContext.Provider>
  );
}

function HashRouter({ children }) {
  let historyRef = React.useRef();
  if (historyRef.current == null) {
    historyRef.current = createHashHistory();
  }
  let history = historyRef.current;
  let [state, setState] = React.useState({
    location: history.location,
  });
  React.useEffect(() => {
    const unListen = history.listen(setState);
    return unListen;
  }, [history]);
  return (
    <Router children={children} location={state.location} navigator={history} />
  );
}

function Route(_props: RouteProps): React.ReactElement | null {
  invariant(
    false,
    `A <Route> is only ever to be used as the child of <Routes> element, ` +
      `never rendered directly. Please wrap your <Route> in a <Routes>.`,
  );
}

const Routes = ({ children }) => {
  return useRoutes(createRoutesFromChildren(children));
};

<Routes>
  <Route path="/home" element={<Home />}>
    <Route path="1" element={<Home1 />}>
      <Route path="2" element={<Home2 />}></Route>
    </Route>
  </Route>
  <Route path="/about" element={<About />}></Route>
  <Route path="/list" element={<List />}></Route>
  <Route path="/notFound" element={<NotFound />} />
  <Route path="/navigate" element={<Navigate to="/notFound" />} />
</Routes>

// 第一步：獲取相關的 pathname
let location = useLocation();
let { matches: parentMatches } = React.useContext(RouteContext);
// 第二步：找到匹配的路由分支，將 pathname 和 Route 的 path 做匹配
const matches = matchRoutes(routes, location);
// 第三步：渲染真正的路由組件
const renderedMatches = _renderMatches(matches, parentMatches);
return renderedMatches;

const flattenRoutes = (
  routes,
  branches = [],
  parentsMeta = [],
  parentPath = '',
) => {
  const flattenRoute = (route) => {
    const meta = {
      relativePath: route.path || '',
      route,
    };
    const path = joinPaths([parentPath, meta.relativePath]);
    const routesMeta = parentsMeta.concat(meta);
    if (route.children?.length > 0) {
      flattenRoutes(route.children, branches, routesMeta, path);
    }
    if (route.path == null) {
      return;
    }
    branches.push({ path, routesMeta });
  };
  routes.forEach((route) => {
    flattenRoute(route);
  });
  return branches;
};

const _renderMatches = (matches, parentMatches = []) => {
  let renderedMatches = matches;
  return renderedMatches.reduceRight((outlet, match, index) => {
    let matches = parentMatches.concat(renderedMatches.slice(0, index + 1));
    const getChildren = () => {
      let children;
      if (match.route.Component) {
        children = <match.route.Component />;
      } else if (match.route.element) {
        children = match.route.element;
      } else {
        children = outlet;
      }
      return (
        <RouteContext.Provider
          value={{
            outlet,
            matches,
          }}
        >
          {children}
        </RouteContext.Provider>
      );
    };
    return getChildren();
  }, null);
};

function Outlet(props) {
  return useOutlet(props.context);
}
function useOutlet(context?: unknown) {
  let outlet = useContext(RouteContext).outlet; // 獲取上一級 RouteContext 上面的 outlet
  if (outlet) {
    return (
      <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
    );
  }
  return outlet;
}

function Link({ to, children, onClick }) {
  const navigate = useNavigate();
  const handleClick = onClick
    ? onClick
    : (event) => {
        event.preventDefault();
        navigate(to);
      };
  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  );
}

function useLocation() {
  return useContext(LocationContext).location;
}
function useNavigate() {
  const { navigator } = useContext(NavigationContext);
  const navigate = useCallback(
    (to: string) => {
      navigator.push(to);
    },
    [navigator],
  );
  return navigate;
}