var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { List, ListItem, Row, Column, Input, } from '@nimles/react-web-components';
import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { updateCartItem } from '@nimles/react-redux';
import { Divider, Price } from '@nimles/react-web-components';
import styled from '@emotion/styled';
const TotalAmount = styled.div `
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 20px;
`;
const ShoppingCartItem = ({ cart, item, isEditable }) => {
    const dispatch = useDispatch();
    const [prelQuantity, setPrelQuantity] = useState();
    const [savedQuantity, setSavedQuantity] = useState(item.quantity);
    const [isUpdating, setUpdating] = useState(false);
    useEffect(() => {
        (function syncCartItem() {
            return __awaiter(this, void 0, void 0, function* () {
                if (!isUpdating) {
                    if (prelQuantity !== undefined && prelQuantity != savedQuantity) {
                        try {
                            setUpdating(true);
                            yield dispatch(updateCartItem(cart.id, {
                                productId: item.productId,
                                quantity: prelQuantity,
                            }));
                            setSavedQuantity(prelQuantity);
                        }
                        catch (e) {
                            setPrelQuantity(undefined);
                        }
                        finally {
                            setUpdating(false);
                        }
                    }
                    else {
                        setPrelQuantity(undefined);
                        setSavedQuantity(undefined);
                    }
                }
            });
        })();
    }, [prelQuantity, isUpdating]);
    const changeCartItemQuantity = (item, e) => __awaiter(void 0, void 0, void 0, function* () {
        e.preventDefault();
        const value = Number(e.target.value);
        setPrelQuantity(value);
    });
    return (<ListItem>
      <Row wrap align="center">
        <Column flex>{item.product && item.product.name}</Column>
        <Column xs={60} md={15} align="flex-end">
          <Price>{item.product && item.product.netPrice}</Price>
        </Column>
        <Column width="120px">
          {isEditable ? (<Input align="right" type="number" value={prelQuantity || item.quantity} onChange={(e) => changeCartItemQuantity(item, e)}/>) : (item.quantity)}
        </Column>
        <Column xs={20} md={15} align="flex-end">
          <Price>{item.product && item.product.netPrice * item.quantity}</Price>
        </Column>
      </Row>
    </ListItem>);
};
export const ShoppingCart = ({ cart, isEditable }) => {
    const cartItems = cart &&
        cart.items &&
        cart.items.map((item) => {
            return Object.assign({}, item);
        });
    const totalAmount = cartItems &&
        cartItems.reduce((sum, item) => sum + item.product.netPrice * item.quantity, 0);
    return (<>
      <List>
        {cartItems &&
            cartItems.map((item, index) => (<ShoppingCartItem key={index} cart={cart} item={item} isEditable={isEditable}/>))}
      </List>
      <Divider />
      <Row justify="flex-end">
        <Column padding>
          <TotalAmount>
            <Price>{totalAmount}</Price>
          </TotalAmount>
        </Column>
      </Row>
    </>);
};
//# sourceMappingURL=ShoppingCart.jsx.map