import WithAuth from "@/components/auth/WithAuth";
import Alert from "@/components/elements/Alert";
import Pagination from "@/components/elements/Pagination";
import Spinner from "@/components/elements/Spinner";
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import ProductCard from "@/components/products/ProductCard";
import apiOdoo from "@/core/utils/apiOdoo";
import { useAuth } from "@/core/utils/auth";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Wishlist() {
  const [ auth ] = useAuth();
  const router = useRouter();
  const { page = 1 } = router.query;
  const [ wishlists, setWishlists ] = useState(null);
  const [ pageCount, setPageCount ] = useState(0);

  useEffect(() => {
    const loadWishlist = async () => {
      const limit = 10;
      const offset = (page - 1) * limit;
      if (auth) {
        const dataWishlist = await apiOdoo('GET', `/api/v1/user/${auth.id}/wishlist?limit=${limit}&offset=${offset}`);
        setWishlists(dataWishlist);
        setPageCount(Math.ceil(dataWishlist.product_total / limit));
      }
    }
    loadWishlist();
  }, [ auth, page ]);

  return (
    <WithAuth>
      <Layout>
        <AppBar title='Wishlist' />

        <div className="px-4 py-6">
          { !wishlists && (
            <Spinner className="w-6 h-6 text-gray-600 fill-gray-900 mx-auto" />
          ) }
          { wishlists?.products?.length == 0 && (
            <Alert type='info' className='text-center'>
              Wishlist anda masih kosong
            </Alert>
          ) }
          <div className="grid grid-cols-2 gap-3">
            {wishlists?.products.map((product) => (
              <ProductCard key={product.id} data={product} />
            ))}
          </div>

          <div className="mt-6">
            <Pagination currentPage={page} pageCount={pageCount} url={`/my/wishlist`} />
          </div>
        </div>
      </Layout>
    </WithAuth>
  )
}