import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import { Pagination, Navigation } from "swiper/modules";
import { useAppSelector } from "../../../../../app/redux/hooks";
import CategoriesSwiperSkeleton from "../../landingPage/components/skeletons/CategoriesSkeleton";
import { Link } from "react-router-dom";

export const RecentlyViewed = () => {
  const productList = useAppSelector(
    (state) => state.productTypesState.productTypes
  );

  return (
    <>
      {productList?.loader ? (
        <CategoriesSwiperSkeleton />
      ) : (
        <section className="flat-spacing-5 pb_0">
          <div className="container">
            <div className="flat-title">
              <span className="title wow fadeInUp" data-wow-delay="0s">
                Recently Viewed
              </span>
            </div>
            <div className="hover-sw-nav">
              <Swiper
                freeMode={true}
                navigation={{
                  nextEl: ".nav-prev-slider",
                  prevEl: ".nav-next-slider",
                }}
                pagination={{
                  el: ".sw-dots",
                  clickable: true,
                }}
                breakpoints={{
                  1024: { slidesPerView: 4, spaceBetween: 10 },
                  768: { slidesPerView: 2, spaceBetween: 15 },
                  480: { slidesPerView: 2, spaceBetween: 15 },
                }}
                modules={[Pagination, Navigation]}
                className="mySwiper"
              >
                {productList?.data?.map((item: any, index: any) => (
                  <SwiperSlide key={item.id}>
                    <div className="collection-item style-2 hover-img card-product">
                      <div className="collection-inner">
                        <div className="collection-image img-style">
                          <Link
                            to={{
                              pathname: `/product/${item?.category_code}`,
                            }}
                          >
                            <img
                              className="lazyload"
                              data-src={`${process.env.REACT_APP_API_URL}${item?.standard_image}`}
                              src={`${process.env.REACT_APP_API_URL}${item?.standard_image}`}
                              alt="Fresh Cream Cakes"
                            />
                          </Link>
                        </div>
                        <div className="collection-content">
                          <div className="list-product-btn absolute-2">
                            <a
                              href="#shoppingCart"
                              data-bs-toggle="modal"
                              className="box-icon bg_white quick-add tf-btn-loading"
                            >
                              <span className="icon icon-bag"></span>
                              <span className="tooltip">Add to Bag</span>
                            </a>
                            <a
                              href="#"
                              className="box-icon bg_white wishlist btn-icon-action"
                            >
                              <span className="icon icon-heart"></span>
                              <span className="tooltip">Add to Wishlist</span>
                              <span className="icon icon-delete"></span>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div className="card-product-info">
                        <a href="#" className="title link">
                          {item?.category_name || "Product Name"}
                        </a>
                        <span className="price">₹{item?.price || "0.00"}</span>
                      </div>
                    </div>

                    {/* <div className="card-product">
                      <div className="card-product-wrapper">
                        <a href="#" className="product-img">
                          <img
                            className="lazyload img-product"
                            data-src={`${process.env.REACT_APP_API_URL}${item?.standard_image}`}
                            src={`${process.env.REACT_APP_API_URL}${item?.standard_image}`}
                            alt="image-product"
                          />
                          <img
                            className="lazyload img-hover"
                            data-src={`${process.env.REACT_APP_API_URL}${item?.standard_image}`}
                            src={`${process.env.REACT_APP_API_URL}${item?.standard_image}`}
                            alt="image-product"
                          />
                        </a>
                        <div className="list-product-btn absolute-2">
                          <a
                            href="#shoppingCart"
                            data-bs-toggle="modal"
                            className="box-icon bg_white quick-add tf-btn-loading"
                          >
                            <span className="icon icon-bag"></span>
                            <span className="tooltip">Add to Bag</span>
                          </a>
                          <a
                            href="#"
                            className="box-icon bg_white wishlist btn-icon-action"
                          >
                            <span className="icon icon-heart"></span>
                            <span className="tooltip">Add to Wishlist</span>
                            <span className="icon icon-delete"></span>
                          </a>
                        </div>
                      </div>
                      <div className="card-product-info">
                        <a href="#" className="title link">
                          {item?.category_name || "Product Name"}
                        </a>
                        <span className="price">₹{item?.price || "0.00"}</span>
                      </div>
                    </div> */}
                  </SwiperSlide>
                ))}
              </Swiper>

              <div className="nav-sw nav-next-slider box-icon w_46 round">
                <span className="icon icon-arrow-left"></span>
              </div>
              <div className="nav-sw nav-prev-slider box-icon w_46 round">
                <span className="icon icon-arrow-right"></span>
              </div>

              <div className="sw-dots style-2 sw-pagination-collection justify-content-center"></div>
            </div>
          </div>
        </section>
      )}
    </>
  );
};