import { Outlet, useLocation, useParams } from "react-router"
import { Link } from "react-router-dom"
import { GetPlayer } from "../../api/player"
import WithDataFetching from "../../components/withdatafetching"
import Player from "../../types/player"
import Sidebar from "./sidebar"

export default function PlayerPage() {
  const { slug } = useParams()

  if (!slug) {
    return <div>No slug</div>
  }
  return (
    <WithDataFetching
      queryKey={["player", slug]}
      queryFn={() => GetPlayer(slug)}
    >
      {(player) => <PlayerLayout player={player} />}
    </WithDataFetching>
  )

  function PlayerLayout({ player }: { player: Player }) {
    const { pathname } = useLocation()
    const tabs = [
      { id: "summary", title: "Summary" },
      { id: "clubhistory", title: "Club History" },
      { id: "scores", title: "Scores" },
    ]
    return (
      <div className="grid h-screen grid-cols-[260px_1fr]">
        <Sidebar player={player}></Sidebar>
        <div className="flex flex-col">
          <div className="flex divide-x border-b border-gray-200">
            {tabs.map((tab) => (
              <Link key={tab.id} to={`/player/${slug}/${tab.id}`}>
                <div
                  key={tab.id}
                  className={`text-md px-6 py-2 text-center font-normal ${pathname.includes(tab.id) ? "bg-gray-200" : ""}`}
                >
                  {tab.title}
                </div>
              </Link>
            ))}
          </div>
          <div className="p-6">
            <Outlet />
          </div>
        </div>
      </div>
    )
  }
}