import { Row, Column, Card, CardBody } from "@nimles/react-web-components";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { searchAndLoadPublicProducts, useAppDispatch, } from "@nimles/react-redux";
import styled from "@emotion/styled";
import { Image, Price } from "@nimles/react-web-components";
import { NavLink } from "./Link";
const Name = styled.h2 `
  font-size: 16px;
  margin-top: 0;
  font-size: 500;
  flex: 1 0 auto;
`;
const CardLink = styled(NavLink) `
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
`;
export const ProductList = ({ organizationId, productGroupId, start = 0, limit = 24, order = "name", }) => {
    const dispatch = useAppDispatch();
    const products = useSelector(({ publicProducts }) => publicProducts.values);
    const tenant = useSelector(({ publicTenants }) => publicTenants.selected);
    useEffect(() => {
        dispatch(searchAndLoadPublicProducts({
            start,
            limit,
            order,
            organizationId,
            productGroupIds: productGroupId,
        }));
    }, [start, limit, order, organizationId, productGroupId]);
    return (<Row wrap>
      {products.map((product) => (<Column key={product.id} padding xs={100} md={50} lg={33} xl={25}>
          <Card flex="1 0 auto">
            <CardLink to={`/${product.uniqueName}/pr`}>
              <Image src={`https://media.nimles.com/file/${tenant.id}/${product.images[0].id}?width=200`} alt={product.name}/>
              <CardBody>
                <Name>{product.name}</Name>
                <Price>{product.netPrice}</Price>
              </CardBody>
            </CardLink>
          </Card>
        </Column>))}
    </Row>);
};
//# sourceMappingURL=ProductList.jsx.map