"use client";

import Image from "next/image";
import Link from "next/link";

import FavoriteIcon from "@mui/icons-material/Favorite";
// import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
import ListCard from "@/src/components/custom-components/list-card";
import Pagination from "@/src/components/custom-components/pagination";
import { useAppDispatch, useAppSelector } from "@/src/redux/hooks";
import { useEffect } from "react";
import { setCurrentPage } from "@/src/redux/slice/products-slice";
import { routes } from "@/src/config/routes";


const WishlistPage = ({ wishlist, isWishlisted }: { wishlist: any, isWishlisted: any }) => {

    const dispatch = useAppDispatch();
    const { currentPage, productsPerPage } = useAppSelector(
        (state) => state.products
    );
    const totalPages = Math.ceil(wishlist / productsPerPage);
    const startIndex = (currentPage - 1) * productsPerPage;

    useEffect(() => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    }, [currentPage]);

    const changePage = (page: number) => {
        dispatch(setCurrentPage(page));

        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };

    return (
        <section>
            <div className="flex items-center justify-between mb-10">
                <div>
                    <h1 className="text-3xl font-bold text-primary">My Wishlist</h1>
                    <p className="text-gray-500 mt-2">
                        {wishlist?.length} saved products
                    </p>
                </div>
                <Link
                    href={routes.home}
                    className="
                    inline-flex
                    items-center
                    justify-center
                    border
                    border-primary
                    rounded-md
                    text-primary
                    font-medium
                    transition
                    hover:bg-primary
                    hover:text-white
                    px-4 py-2 text-sm
                    sm:px-5 sm:py-2.5 sm:text-base
                    lg:px-6 lg:py-3
                "
                >
                    Continue Shopping
                </Link>
            </div>
            <ListCard
                products={wishlist}
                isWishlisted={isWishlisted}
            />
            <Pagination
                totalPages={totalPages}
                currentPage={currentPage}
                changePage={changePage}
            />
        </section>
    );
};

export default WishlistPage;