import React, { useContext } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import ProductItem from "./ProductItem/ProductItem";
// import LoadingProducts from "./loaders/Products";
import NoResults from "../empty-states/NoResults/NoResults";
import styles from "./Products.module.scss";
import {
  CartContext,
  Init,
  ProductWeb,
  QuickPreview,
} from "../../context/ShoppingCart";

type Props = {
  searchTerm: string;
  productsList: ProductWeb[];
  openModal: (prodect: QuickPreview) => void;
};

const Products = ({ searchTerm, productsList, openModal }: Props) => {
  const { addProduct } = useContext<Init>(CartContext);

  const term = searchTerm;

  const searchingFor = (searchText: string) => {
    return (x) => {
      return (
        x.name.toLowerCase().includes(searchText.toLowerCase()) || !searchText
      );
    };
  };

  const productsData = productsList
    .filter(searchingFor(term))
    .map((product) => {
      return (
        <CSSTransition
          key={product.id}
          classNames="fadeIn"
          timeout={{
            enter: 300,
            exit: 500,
          }}
        >
          <ProductItem
            // key={product.id}
            price={product.price}
            name={product.name}
            image={product.image}
            id={parseInt(product.id, 10)}
            unit={product.unit}
            addToCart={addProduct}
            // productQuantity={props.productQuantity}
            openModal={openModal}
          />
        </CSSTransition>
      );
    });

  // Empty and Loading States
  let view;
  // if (productsData.length <= 0 && !term) {
  //   view = <LoadingProducts />;
  // } else
  if (productsData.length <= 0 && term) {
    view = <NoResults />;
  } else {
    view = (
      <TransitionGroup component="div" className={styles.products}>
        {productsData}
      </TransitionGroup>
    );
  }
  return <div className={styles.productsWrapper}>{view}</div>;
};

export default Products;