import React from "react";
import { useSessionStorage } from "react-use";
import { Link } from "react-router-dom";

const DebugHomeRouterPage = ({ token, path }) => {
  console.log("%c Line:7 🍪 token", "color:#4fff4B", token);
  console.log("%c Line:7 🍔 path", "color:#465975", path);
  const [kToken, setKToken] = useSessionStorage("token", token);
  // 功能钩子
  const routes = [
    {
      path: "/course",
      label: "课程首页 Done (/course)",
    },
    {
      path: "/my_course",
      label: "我的课程 WIP (/my_course)",
    },
    {
      path: "/detail/mock-data-8912-32-132-1-8",
      label: "课程详情 Done (/detail/mock-id)",
    },
    {
      path: "/video_course_player/mock-data-8912-32-132-1-8/FPlatformEnum.web",
      label: "课程播放器 WIP (/video_course_player/mock-id/mock-platform)",
    },
  ];

  if (path) {
    console.log("%c Line:29 🍆 path", "color:#93c0a4", path);
    this.props.router.push(path);
    return <div></div>;
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-screen w-full h-full">
      <div className="text-5xl m-5">杏聆荟学院</div>
      <div className="text-2xl m-5">测试用路由表</div>
      <div>{kToken}</div>
      {routes.map((route) => (
        <Link key={route.path} to={route.path}>
          <button
            className={
              "text-xl font-bold p-2 m-2 rounded border hover:bg-gray-100"
            }
          >
            {route.label}
          </button>
        </Link>
      ))}
    </div>
  );
};

export default DebugHomeRouterPage;
