"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShoppingCartMenu = void 0;
const react_1 = __importDefault(require("react"));
const react_web_components_1 = require("@nimles/react-web-components");
const react_web_components_2 = require("@nimles/react-web-components");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const styled_1 = __importDefault(require("@emotion/styled"));
const react_redux_1 = require("react-redux");
const react_web_components_3 = require("@nimles/react-web-components");
const ShoppingCart_1 = require("./ShoppingCart");
const Link_1 = require("./Link");
const CartLabel = styled_1.default.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 = (0, styled_1.default)(react_fontawesome_1.FontAwesomeIcon) `
  font-size: 20px;
`;
const CartQuantity = styled_1.default.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_1.default.div `
  padding-left: 20px;
`;
const CartPrice = styled_1.default.div `
  font-size: 14px;
  font-weight: normal;
`;
const CartMenu = styled_1.default.div `
  background: #fff;
  padding: 10px;
  border: 1px solid lightgrey;
`;
const ShoppingCartMenu = ({}) => {
    const cart = (0, react_redux_1.useSelector)(({ carts }) => carts.selected);
    const gotoCart = () => {
        (0, Link_1.navigate)('/cart');
    };
    const handleCheckout = () => {
        (0, Link_1.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 (<react_web_components_3.DropdownMenu align="right" menu={() => (<CartMenu>
          <react_web_components_2.Row justify="flex-end">
            <react_web_components_2.Column></react_web_components_2.Column>
          </react_web_components_2.Row>
          <ShoppingCart_1.ShoppingCart cart={cart}/>
          <react_web_components_2.Row justify="flex-end">
            <react_web_components_2.Column>
              <react_web_components_1.Button border primary onClick={gotoCart}>
                Open cart
              </react_web_components_1.Button>
            </react_web_components_2.Column>
            <react_web_components_2.Column>
              <react_web_components_1.Button raised primary onClick={handleCheckout}>
                Checkout
              </react_web_components_1.Button>
            </react_web_components_2.Column>
          </react_web_components_2.Row>
        </CartMenu>)}>
      <CartLabel>
        {totalQuantity ? <CartQuantity>{totalQuantity}</CartQuantity> : null}
        <CartIcon icon={free_solid_svg_icons_1.faShoppingBasket}/>
        <CartSummary>
          {totalAmount ? <CartPrice>{totalAmount + ' kr'}</CartPrice> : null}
          <div>Inkl. moms</div>
        </CartSummary>
      </CartLabel>
    </react_web_components_3.DropdownMenu>);
};
exports.ShoppingCartMenu = ShoppingCartMenu;
//# sourceMappingURL=ShoppingCartMenu.jsx.map