import React, { useState, useEffect } from "react";
import ResponsiveAppBar from "../../../layouts/navbar";
import { Footer } from "../../../layouts/footer";
import { ProductTypes } from "../landingPage/components/productTypes";
import { Link, useLocation, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import { getOfferListAsync } from "../../../../app/slices/offerSlice/OfferSlice";
import { setSelectProduct } from "../../../../app/slices/productDiscriptionSlice/ProductDescriptionSlice";

export const OfferListingPage = () => {
  const dispatch = useAppDispatch();
  const offerList = useAppSelector((state) => state.OfferDataState.offerList);
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  useEffect(() => {
    const aId = localStorage.getItem("aId");
    const payload: any = aId ? { anonymous_id: aId } : undefined;
    dispatch(getOfferListAsync(payload));
  }, []);

  const selectProduct = (id: any) => {
    // dispatch(setSelectProduct(id));
    localStorage.setItem("offer_id", id);
  };

  return (
    <>
      <div
        id="wrapper"
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: "400",
        }}
      >
        <ResponsiveAppBar />
        {/* <ProductTypes /> */}
        <div className="tf-page-title style-3">
          <div className="container-full">
            <div className="heading text-center">Offers</div>
          </div>
        </div>
        <div className="blog-grid-main">
          <div className="container">
            <div className="row">
              {offerList?.data?.discounts?.map((item: any, index: number) => {
                return (
                  <>
                    <div className="col-xl-6 col-md-6 col-12" key={index}>
                      <div className="blog-article-item">
                        <div
                          className="article-thumb"
                          style={{ height: "250px", width: "100%" }}
                        >
                          <Link
                            to={`orders/discounts/${item.id}/`} // Link to product description
                            className="title link"
                            onClick={() => selectProduct(item?.id)}
                          >
                            <img
                              className="lazyload"
                              data-src={`${process.env.REACT_APP_API_URL}${item?.WebImage}`}
                              src={`${process.env.REACT_APP_API_URL}${item?.WebImage}`}
                              alt="image-product"
                            />
                          </Link>

                          {/* <div className="article-label">
                            <a
                              href="#"
                              className="tf-btn btn-sm radius-3 btn-fill animate-hover-btn"
                            >
                              Muffins & Pastries
                            </a>
                          </div> */}
                        </div>
                        <div className="article-content">
                          <div className="article-title">
                            <Link
                              to={`orders/discounts/${item.id}/`}
                              className="title link"
                            >
                              <span onClick={() => selectProduct(item?.id)}>
                                {item.DiscountName}
                              </span>
                            </Link>
                          </div>
                          <div className="article-btn">
                            <Link
                              to={`orders/discounts/${item.id}/`}
                              className="title link"
                            >
                              <a
                                onClick={() => selectProduct(item?.id)}
                                className="tf-btn btn-line fw-6"
                              >
                                Avail Offer
                                <i className="icon icon-arrow1-top-left"></i>
                              </a>
                            </Link>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>
                );
              })}
            </div>
          </div>
        </div>
        <Footer />{" "}
      </div>{" "}
    </>
  );
};