import NotFound from "@components/common/not-found";
import ErrorMessage from "@components/ui/error-message";
import CategoryListLoader from "@components/ui/loaders/category-loader";
import Scrollbar from "@components/ui/scrollbar";
import SidebarMenu from "@components/ui/sidebar-menu";
import { useCategoriesQuery } from "@data/category/use-categories.query";

const CategoryDropdownSidebar = () => {
  const {data, isLoading: loading, error } = useCategoriesQuery({
    type: "grocery",
  });

  if (loading) {
    return (
      <div className="hidden xl:block">
        <div className="w-72 mt-8 px-2">
          <CategoryListLoader />
        </div>
      </div>
    );
  }
  if (error) return <ErrorMessage message={error.message} />;

  return (
    <aside className="sticky top-22 h-full lg:w-72 hidden xl:block bg-white">
      <div className="max-h-full overflow-hidden">
        <Scrollbar className="w-full h-full max-h-screen">
          {data?.categories?.data?.length ? (
            <div className="px-5">
              <SidebarMenu items={data?.categories?.data} className="py-8" />
            </div>
          ) : (
            <div className="min-h-full pt-6 pb-8 px-9 lg:p-8">
              <NotFound text="Sorry, No Category Found :(" className="h-96" />
            </div>
          )}
        </Scrollbar>
      </div>
    </aside>
  );
};

export default CategoryDropdownSidebar;