import { Outlet, useLocation, useParams } from "react-router"
import { Link } from "react-router-dom"
import { GetTeam } from "../../api/team"
import WithDataFetching from "../../components/withdatafetching"
import Team from "../../types/team"
import Sidebar from "./sidebar"

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

  if (!slug) {
    return <div>No slug</div>
  }
  return (
    <WithDataFetching queryKey={["team", slug]} queryFn={() => GetTeam(slug)}>
      {(team) => <TeamLayout team={team} />}
    </WithDataFetching>
  )

  function TeamLayout({ team }: { team: Team }) {
    const { pathname } = useLocation()
    const tabs = [
      { id: "roster", title: "Roster" },
      { id: "transfers", title: "Transfers" },
    ]
    return (
      <div className="grid h-screen grid-cols-[260px_1fr]">
        <Sidebar team={team}></Sidebar>
        <div className="flex flex-col">
          <div className="flex divide-x border-b border-gray-200">
            {tabs.map((tab) => (
              <Link key={tab.id} to={`/team/${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>
    )
  }
}