import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';
import { LazyImage } from '../../../../../Common';
import { usePrice, useBasketCustom } from '@sentecacommerce-theme/lib';
import { ActionsWrapper } from '../';
import { IconClose } from '../../../../../Common/Icons';
export var CustomProduct = props => {
  var _fields$image;

  var {
    name,
    _id: lineItemId,
    fields,
    taxedPrice
  } = props;
  var {
    price: productPrice
  } = usePrice({
    price: taxedPrice.totalGross,
    discountedPrice: undefined
  });
  var {
    removeFromBasket
  } = useBasketCustom(fields.productId, fields.variantId, lineItemId);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Link, {
    href: "checkout-voucher",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(LazyImage, {
    src: (_fields$image = fields.image) == null ? void 0 : _fields$image.thumbnail,
    backgroundOverImage: true
  })))), /*#__PURE__*/React.createElement(DetailsContainer, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Name, null, name)), /*#__PURE__*/React.createElement(Mobile, null, /*#__PURE__*/React.createElement(RemoveFromBasketContainer, {
    onClick: removeFromBasket
  }, /*#__PURE__*/React.createElement(IconClose, {
    style: {
      width: '1.2rem'
    }
  }))), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Desktop, null, /*#__PURE__*/React.createElement(ActionsWrapper, {
    handleRemoveFromBasket: removeFromBasket
  })), /*#__PURE__*/React.createElement("span", {
    className: "ml-auto"
  }, productPrice.displayValue))));
};
var Container = styled.div.attrs({
  className: 'py-4 d-flex'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.secondary;
});
var Name = styled.span.attrs({
  className: 'd-block pr-4 pr-md-1'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Desktop = styled.div.attrs({
  className: 'd-none d-md-block'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Mobile = styled.div.attrs({
  className: 'd-md-none'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var ImageWrapper = styled.div.attrs({
  className: 'mr-4'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 14rem;\n\n  & img {\n    width: 100%;\n  }\n\n  @media (max-width: ", ") {\n    width: 9.6rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.sm.max;
});
var DetailsContainer = styled.div.attrs({
  className: 'd-flex flex-column justify-content-between flex-grow-1'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var Flex = styled.div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  &:last-of-type {\n    margin-top: auto;\n  }\n"])));
//# sourceMappingURL=index.js.map