import React, { useMemo, FC, useState } from "react";
import cx from "classnames";

import ProductCard from "../productCard/ProductCard";
import { VIEW_TYPES } from "../../../constants/product";

import styles from "./productsList.module.scss";
import RequestQuoteModal from "../../productDetails/leftPane/components/RequestQuoteModal";
import { Spin } from "antd";

const ProductsList: FC<any> = ({ products, viewType }) => {
  const [isRequestQuoteModalOpen, setIsRequestQuoteModalOpen] = useState(false);
  const [productDetails, setProductDetails] = useState<any>({});
  const [isLoading, setIsLoading] = useState(false);

  const isGridView = useMemo(() => viewType === VIEW_TYPES.GRID, [viewType]);

  return (
    <div className="pb-20">
      <Spin tip="Loading..." spinning={isLoading}>
        <div
          className={cx("mt-2", { [styles.productGridContainer]: isGridView })}
        >
          {Array.isArray(products) &&
            products.map((product: any) => {
              return (
                <ProductCard
                  key={product.id}
                  product={product}
                  isGridView={isGridView}
                  setIsLoading={setIsLoading}
                  
                />
              );
            })}
        </div>
      </Spin>
      {isRequestQuoteModalOpen && (
        <RequestQuoteModal
          isOpen={true}
          handleModalClose={() => setIsRequestQuoteModalOpen(false)}
          productDetails={productDetails}
        />
      )}
    </div>
  );
};

export default ProductsList;