import { useQuery } from "@tanstack/react-query"
import api from "../api/eolas-api"
import { Link } from "react-router"
import { Badge } from "./ui/badge"

export default function EntryReferences({ entryTitle }) {
   const { data: tags, isLoading: tagsLoading } = useQuery({
      queryKey: [`tags_for_${entryTitle}`],
      queryFn: () => api.get(`/tags/${entryTitle}`).then((res) => res.data),
   })

   const { data: backlinks, isLoading: backlinksLoading } = useQuery({
      queryKey: [`backlinks_for_${entryTitle}`],
      queryFn: () => api.get(`/entries/backlinks/${entryTitle}`).then((res) => res.data),
   })

   const { data: outlinks, isLoading: outlinksLoading } = useQuery({
      queryKey: [`outlinks_for_${entryTitle}`],
      queryFn: () => api.get(`/entries/outlinks/${entryTitle}`).then((res) => res.data),
   })

   console.log(backlinks)
   return (
      <div className="w-full flex flex-row justify-between gap-3">
         <div className="w-full">
            <div className="flex flex row justify-between bg-sidebar">
               <h3 className="font-medium text-sm p-1 ml-1">Tags</h3>
               <Badge variant="secondary" className="rounded-none">
                  {tags?.count}
               </Badge>
            </div>
            <div className="mt-2 mb-3 pl-1">
               {tags?.data.map((item, i) => (
                  <Link
                     key={i}
                     to={`/tags/${item}`}
                     className="text-foreground underline-offset-3 text-sm underline hover:text-gray-700 dark:hover:text-green-300 pr-2"
                  >
                     {item}
                  </Link>
               ))}
            </div>

            <div className="flex flex row justify-between bg-sidebar">
               <h3 className="font-medium text-sm p-1 ml-1">Incoming links</h3>
               <Badge variant="secondary" className="rounded-none">
                  {backlinks?.count}
               </Badge>
            </div>

            <div className="mt-2 mb-3 pl-1">
               {backlinks &&
                  backlinks?.data.map((item, i) => (
                     <Link
                        key={i}
                        to={`/entries/${item}`}
                        className="text-foreground underline-offset-3 text-sm underline hover:text-gray-700 dark:hover:text-green-300 pr-2 block mb-2"
                     >
                        {item.replace(/_/g, " ")}
                     </Link>
                  ))}
            </div>
         </div>

         <div className="w-full">
            <div className="flex flex row justify-between bg-sidebar">
               <h3 className="font-medium text-sm p-1 ml-1">Outgoing links</h3>
               <Badge variant="secondary" className="rounded-none">
                  {outlinks?.count}
               </Badge>
            </div>

            <div className="mt-2 mb-3 pl-1">
               {outlinks &&
                  outlinks?.data.map((item, i) => (
                     <Link
                        key={i}
                        to={`/entries/${item}`}
                        className="text-foreground underline-offset-3 text-sm underline hover:text-gray-700 dark:hover:text-green-300 pr-2 block mb-2"
                     >
                        {item.replace(/_/g, " ")}
                     </Link>
                  ))}
            </div>
         </div>
      </div>
   )
}