import React from 'react';
import { Button } from '@nimles/react-web-components';
import { Row, Column } from '@nimles/react-web-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faShoppingBasket } from '@fortawesome/free-solid-svg-icons';
import styled from '@emotion/styled';
import { useSelector } from 'react-redux';
import { DropdownMenu } from '@nimles/react-web-components';
import { ShoppingCart } from './ShoppingCart';
import { navigate } from './Link';
const CartLabel = styled.div `
  position: relative;
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 48px;
  padding: 0 8px;

  @media (min-width: ${(props) => props.theme.thresholds.sm}px) {
    padding: 0 32px;
  }
`;
const CartIcon = styled(FontAwesomeIcon) `
  font-size: 20px;
`;
const CartQuantity = styled.div `
  position: absolute;
  left: 8px;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  font-size: 12px;
  background: rgba(255, 0, 0, 0.8);
  color: white;

  @media (min-width: ${(props) => props.theme.thresholds.sm}px) {
    left: 32px;
  }
`;
const CartSummary = styled.div `
  padding-left: 20px;
`;
const CartPrice = styled.div `
  font-size: 14px;
  font-weight: normal;
`;
const CartMenu = styled.div `
  background: #fff;
  padding: 10px;
  border: 1px solid lightgrey;
`;
export const ShoppingCartMenu = ({}) => {
    const cart = useSelector(({ carts }) => carts.selected);
    const gotoCart = () => {
        navigate('/cart');
    };
    const handleCheckout = () => {
        navigate('/checkout');
    };
    const totalQuantity = cart &&
        cart.items &&
        cart.items.reduce((sum, item) => sum + item.quantity, 0);
    const totalAmount = cart &&
        cart.items &&
        cart.items.reduce((sum, item) => sum + item.product.netPrice * item.quantity, 0);
    return (<DropdownMenu align="right" menu={() => (<CartMenu>
          <Row justify="flex-end">
            <Column></Column>
          </Row>
          <ShoppingCart cart={cart}/>
          <Row justify="flex-end">
            <Column>
              <Button border primary onClick={gotoCart}>
                Open cart
              </Button>
            </Column>
            <Column>
              <Button raised primary onClick={handleCheckout}>
                Checkout
              </Button>
            </Column>
          </Row>
        </CartMenu>)}>
      <CartLabel>
        {totalQuantity ? <CartQuantity>{totalQuantity}</CartQuantity> : null}
        <CartIcon icon={faShoppingBasket}/>
        <CartSummary>
          {totalAmount ? <CartPrice>{totalAmount + ' kr'}</CartPrice> : null}
          <div>Inkl. moms</div>
        </CartSummary>
      </CartLabel>
    </DropdownMenu>);
};
//# sourceMappingURL=ShoppingCartMenu.jsx.map