amber/src/components/ProductList/ProductList.jsx

import { useEffect, useState } from "react";
import {
  Box,
  Typography,
  Button,
  FormControl,
  Select,
  MenuItem,
  InputBase,
} from "@mui/material";
import Grid from "@mui/material/Grid2";
import { styled } from "@mui/material";
//REDUX
import { useSelector, useDispatch } from "react-redux";
import { fetchProducts } from "../../redux/slices/productSlice";
import { useNavigate } from "react-router-dom";

//UTIL FUNCTION
function getAllTags(data) {
  const products = data || [];
  const allTags = products.flatMap((product) => product.tags);
  const uniqueTags = [...new Set(allTags)];
  return uniqueTags;
}

function getAllCollection(data) {
  const products = data || [];
  const allCollection = products.flatMap((product) => product.collections);
  const uniqueCollection = Array.from(
    new Map(allCollection.map((item) => [item?.title, item])).values()
  );
  return uniqueCollection;
}

const BootstrapInput = styled(InputBase)(({ theme }) => ({
  "label + &": {
    marginTop: theme.spacing(3),
  },
  "& .MuiInputBase-input": {
    position: "relative",
    backgroundColor: "#2E2E2E",
    border: "1px solid #ced4da",
    color: "#FFF",
    fontSize: 13,
    padding: "5px 0",
    paddingRight: "50px !important",
    paddingLeft: "10px",
    transition: theme.transitions.create(["border-color", "box-shadow"]),
    "&:focus": {
      borderRadius: 4,
      borderColor: "#80bdff",
      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.25)",
    },
  },
  "& .MuiSvgIcon-root": {
    color: "#FFF !important",
  },
}));

const ProductList = ({ size = 99999 }) => {
  const products = useSelector((state) => state.products.products.data); // only used as referenced
  const [filteredProducts, setFilteredProducts] = useState([]); // this one is the actual data to be rendered
  const [tagFilterOption, setTagFilterOption] = useState([]);
  const [collectionFilterOption, setCollectionFilterOption] = useState([]);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  //filter
  const [tags, setTags] = useState("all");
  const [collection, setCollection] = useState("all");
  const [sort, setSort] = useState("new");

  useEffect(() => {
    dispatch(fetchProducts());
  }, []);

  useEffect(() => {
    console.log("Products: ", products);

    if (products.length > 0) {
      let newFilteredProducts = filterProducts();
      setFilteredProducts([]);
      setTimeout(() => {
        setFilteredProducts(newFilteredProducts);
      }, 100);

      const tagList = getAllTags(newFilteredProducts);
      setTagFilterOption(tagList);

      // Filter will only exist if the user haven't click on collection
      if (!sessionStorage.getItem("amber-select-collection")) {
        const collectionList = getAllCollection(newFilteredProducts);
        setCollectionFilterOption(collectionList);
      } else {
        const selectedColletion = JSON.parse(
          sessionStorage.getItem("amber-select-collection")
        );
        setCollection(selectedColletion?.title);
      }
    }
  }, [products]);

  useEffect(() => {
    let newFilteredProducts = filterProducts();
    setFilteredProducts([]);
    setTimeout(() => {
      setFilteredProducts(newFilteredProducts);
    }, 100);
  }, [tags, collection, sort]);

  const filterProducts = () => {
    if (products?.length > 0) {
      let productType = sessionStorage.getItem("amber-select-product-type");

      let newFilteredProducts = products.filter(
        (product) => product.productType === productType
      );

      // Tags
      newFilteredProducts = newFilteredProducts.filter((product) => {
        if (tags == "all") {
          return product.productType === productType;
        } else {
          return (
            product.productType === productType && product.tags.includes(tags)
          );
        }
      });

      // Collection
      newFilteredProducts = newFilteredProducts.filter((product) => {
        if (collection == "all") {
          return product.productType === productType;
        } else {
          return (
            product.productType === productType &&
            product.collections.some((data) => data?.title === collection)
          );
        }
      });

      if (sort === "title") {
        newFilteredProducts = newFilteredProducts.sort((a, b) =>
          a.title.localeCompare(b.title)
        );
      } else if (sort === "new") {
        newFilteredProducts = newFilteredProducts.sort(
          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
        );
      } else if (sort === "old") {
        newFilteredProducts = newFilteredProducts.sort(
          (a, b) => new Date(a.createdAt) - new Date(b.createdAt)
        );
      }

      return newFilteredProducts;
    }

    return [];
  };

  const handleChange = (event) => {
    //setInput({ ...input, [event.target.name]: event.target.value });
  };

  const renderProduct = (
    handle,
    img_url,
    title,
    collection_name,
    minPrice,
    minPriceCurrency,
    maxPrice,
    maxPriceCurrency,
    extra_desc,
    selected = false
  ) => {
    return (
      <Grid
        className="animate__animated animate__fadeIn"
        item
        size={{ xs: 6, sm: 6, md: 3 }}
      >
        <Box
          sx={{
            overflow: "hidden",
            position: "relative",
            cursor: "pointer",
          }}
          onClick={()=>{
            navigate(`/products/${handle}`)
          }}
        >
          <img
            src={img_url}
            alt={title}
            style={{
              width: "100%",
              aspectRatio: "3 / 4",
              objectFit: "cover",
              objectPosition: "top center",
            }}
          />

          {selected && (
            <Button
              sx={{
                position: "absolute",
                top: {
                  xs: 0,
                  sm: 0,
                  md: 10,
                  lg: 20,
                },
                left: {
                  xs: 0,
                  sm: 0,
                  md: 10,
                  lg: 20,
                },
                boxShadow: 0,
                fontSize: 10,
              }}
              variant="contained"
            >
              NEW
            </Button>
          )}

          <Box sx={{ pb: 3, pt: 1, width: "90%" }}>
            <Typography
              variant="body2"
              sx={{
                fontWeight: "100",
                fontSize: {
                  xs: "0.875rem",
                  sm: "0.875rem",
                  md: "1.1rem",
                },
              }}
            >
              {collection_name}
            </Typography>
            <Typography
              variant="body2"
              sx={{
                fontWeight: "400",
                fontSize: {
                  xs: "0.875rem",
                  sm: "0.875rem",
                  md: "1.1rem",
                },
              }}
            >
              {title}
            </Typography>
            <Typography
              variant="body2"
              sx={{
                fontWeight: "100",
                fontSize: {
                  xs: "0.875rem",
                  sm: "0.875rem",
                  md: "1.1rem",
                },
              }}
            >
              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
            </Typography>
          </Box>
        </Box>
      </Grid>
    );
  };

  return (
    <>
      {/* FILTER */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          py: 0,
          flexDirection: {
            xs: "column",
            sm: "row",
            md: "row",
            lg: "row",
          },
          alignItems: "center",
          backgroundColor: "background.black",
          color: "white",
          px: 2, // Add padding around the box
          my: 4,
        }}
      >
        {/* Left Side: Page Title */}
        <Typography
          variant="body2"
          sx={{ fontSize: 10, mt: { xs: 1, sm: 1, md: 0 } }}
        >
          {`${filteredProducts.length} Item`}
        </Typography>

        {/* Right Side: Option Inputs */}
        <Box
          sx={{
            display: "flex",
            gap: 2,
            flexDirection: "row",
            flexWrap: "wrap",
            justifyContent: "space-between",
            py: {
              xs: 2,
              sm: 2,
              md: 0,
            },
          }}
        >
          {tagFilterOption.length > 0 && (
            <FormControl
              sx={{ m: 1, display: "flex", flexDirection: "row" }}
              variant="standard"
            >
              <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
                Tag
              </Typography>
              <Select
                value={tags}
                onChange={(event) => {
                  setTags(event.target.value);
                }}
                sx={{
                  "& .MuiSelect-select": {
                    border: "none",
                  },
                }}
                input={<BootstrapInput />}
                name="type"
              >
                <MenuItem value={"all"}>All</MenuItem>
                {tagFilterOption?.map((data) => (
                  <MenuItem value={data}>{data}</MenuItem>
                ))}
              </Select>
            </FormControl>
          )}

          {collectionFilterOption.length > 0 && (
            <FormControl
              sx={{ m: 1, display: "flex", flexDirection: "row" }}
              variant="standard"
            >
              <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
                Collection
              </Typography>
              <Select
                value={collection}
                onChange={(event) => {
                  setCollection(event.target.value);
                }}
                sx={{
                  "& .MuiSelect-select": {
                    border: "none",
                  },
                }}
                input={<BootstrapInput />}
                name="type"
              >
                <MenuItem value={"all"}>All</MenuItem>
                {collectionFilterOption?.map(({ title }) => (
                  <MenuItem value={title}>{title}</MenuItem>
                ))}
              </Select>
            </FormControl>
          )}

          <FormControl
            sx={{ m: 1, display: "flex", flexDirection: "row" }}
            variant="standard"
          >
            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
              Sort
            </Typography>
            <Select
              value={sort}
              onChange={(event) => {
                setSort(event.target.value);
              }}
              sx={{
                "& .MuiSelect-select": {
                  border: "none",
                },
              }}
              input={<BootstrapInput />}
              name="sort"
            >
              <MenuItem defaultValue value={"title"}>
                Title
              </MenuItem>
              <MenuItem defaultValue value={"new"}>
                Newest
              </MenuItem>
              <MenuItem defaultValue value={"old"}>
                Oldest
              </MenuItem>
            </Select>
          </FormControl>
        </Box>
      </Box>

      {/* LIST */}
      <Box sx={{ mb: 5 }}>
        <Grid container spacing={0.5} columns={12}>
          {filteredProducts.map((product, index) => {
            let {
              handle,
              title,
              images,
              collections,
              minVariantPrice,
              maxVariantPrice,
              productType,
              variants,
              selected,
            } = product;

            let minPrice = minVariantPrice.amount;
            let minPriceCurrency = minVariantPrice.currencyCode;
            let maxPrice = maxVariantPrice.amount;
            let maxPriceCurrency = maxVariantPrice.currencyCode;
            let img_url = images[0]?.url;
            let collection_name = collections[0]?.title;

            if (index < size) {
              return renderProduct(
                handle,
                img_url,
                title,
                collection_name,
                minPrice,
                minPriceCurrency,
                maxPrice,
                maxPriceCurrency,
                "",
                selected
              );
            }
          })}
        </Grid>
      </Box>
    </>
  );
};

export default ProductList;