import { useQuery } from "@tanstack/react-query"
import { PageAssitDatabase } from "~libs/db"
import { Empty, Skeleton } from "antd"

type Props = {}

export const Sidebar = ({}: Props) => {
  const { data: chatHistories, status } = useQuery({
    queryKey: ["fetchChatHistory"],
    queryFn: async () => {
      const db = new PageAssitDatabase()
      const history = await db.getChatHistories()
      return history
    }
  })

  return (
    <div className="overflow-y-auto h-[calc(100%-60px)]">
      {status === "success" && chatHistories.length === 0 && (
        <div className="flex justify-center items-center mt-20 overflow-hidden">
          <Empty description="No history yet" />
        </div>
      )}
      {status === "pending" && (
        <div className="flex justify-center items-center mt-5">
          <Skeleton active paragraph={{ rows: 8 }} />
        </div>
      )}
      {status === "error" && (
        <div className="flex justify-center items-center">
          <span className="text-red-500">Error loading history</span>
        </div>
      )}
      {status === "success" && chatHistories.length > 0 && (
        <div className="flex flex-col gap-2">
          {chatHistories.map((chat, index) => (
            <div
              key={index}
              className="flex py-2 px-2 cursor-pointer items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out  bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
              <span className="flex-grow truncate">{chat.title}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}