"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CustomProduct = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _link = _interopRequireDefault(require("next/link"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Common = require("../../../../../Common");

var _lib = require("@sentecacommerce-theme/lib");

var _ = require("../");

var _Icons = require("../../../../../Common/Icons");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;

var CustomProduct = function CustomProduct(props) {
  var _fields$image;

  var name = props.name,
      lineItemId = props._id,
      fields = props.fields,
      taxedPrice = props.taxedPrice;

  var _usePrice = (0, _lib.usePrice)({
    price: taxedPrice.totalGross,
    discountedPrice: undefined
  }),
      productPrice = _usePrice.price;

  var _useBasketCustom = (0, _lib.useBasketCustom)(fields.productId, fields.variantId, lineItemId),
      removeFromBasket = _useBasketCustom.removeFromBasket;

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ImageWrapper, null, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "checkout-voucher",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement("a", null, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
    src: (_fields$image = fields.image) == null ? void 0 : _fields$image.thumbnail,
    backgroundOverImage: true
  })))), /*#__PURE__*/_react["default"].createElement(DetailsContainer, null, /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(Name, null, name)), /*#__PURE__*/_react["default"].createElement(Mobile, null, /*#__PURE__*/_react["default"].createElement(RemoveFromBasketContainer, {
    onClick: removeFromBasket
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconClose, {
    style: {
      width: '1.2rem'
    }
  }))), /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(Desktop, null, /*#__PURE__*/_react["default"].createElement(_.ActionsWrapper, {
    handleRemoveFromBasket: removeFromBasket
  })), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ml-auto"
  }, productPrice.displayValue))));
};

exports.CustomProduct = CustomProduct;

var Container = _styledComponents["default"].div.attrs({
  className: 'py-4 d-flex'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  box-shadow: rgb(229, 229, 229) 0 0 0 0 inset, rgb(229, 229, 229) 0 0 0 0 inset,\n    rgb(229, 229, 229) 0 -0.1rem 0 0 inset, rgb(229, 229, 229) 0 0 0 0 inset;\n  width: 100%;\n  position: relative;\n"])));

var RemoveFromBasketContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: -0.4rem;\n  right: -0.4rem;\n  width: 3rem;\n  height: 3rem;\n  background-color: ", ";\n  border-radius: 50%;\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette.secondary;
});

var Name = _styledComponents["default"].span.attrs({
  className: 'd-block pr-4 pr-md-1'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Desktop = _styledComponents["default"].div.attrs({
  className: 'd-none d-md-block'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Mobile = _styledComponents["default"].div.attrs({
  className: 'd-md-none'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ImageWrapper = _styledComponents["default"].div.attrs({
  className: 'mr-4'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  width: 14rem;\n\n  & img {\n    width: 100%;\n  }\n\n  @media (max-width: ", ") {\n    width: 9.6rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.sm.max;
});

var DetailsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column justify-content-between flex-grow-1'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var Flex = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  &:last-of-type {\n    margin-top: auto;\n  }\n"])));
//# sourceMappingURL=index.js.map