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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;

import React from 'react';
import { usePrice, useStrings, useBasketLineItem, useConfigState, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { LazyResponsiveImage, Typography } from '../../../Common';
import styled, { css } from 'styled-components';
export var ProductPreview = (_ref) => {
  var {
    item
  } = _ref;
  var labels = useStrings('order');
  var {
    sku,
    unitPrice,
    unitDiscountedPrice,
    totalPrice,
    quantityInBasket,
    name,
    images,
    totalDiscountedPrice,
    getAttributeByKey
  } = useBasketLineItem({
    item
  });
  var {
    price,
    discountPrice,
    discountPercentage
  } = usePrice({
    price: totalPrice,
    discountedPrice: totalDiscountedPrice
  });
  var {
    price: totalPriceFormatted
  } = usePrice({
    price: totalPrice
  });
  var {
    attributeKeys
  } = useConfigState();
  var sizeAttribute = getAttributeByKey(attributeKeys == null ? void 0 : attributeKeys.size);
  var {
    infoMessages
  } = useGlobalLabels();
  var sizeDisplayValue = !!sizeAttribute && sizeAttribute.label + ": " + sizeAttribute.value;
  var colorAttribute = getAttributeByKey(attributeKeys == null ? void 0 : attributeKeys.color);
  var colorDisplayValue = !!colorAttribute && colorAttribute.label + ": " + colorAttribute.value;
  return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {},
    defaultImageWidth: "20rem",
    imagesMap: images == null ? void 0 : images[0]
  })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Name, null, name), /*#__PURE__*/React.createElement(SKU, null, infoMessages.sku, ": ", sku), /*#__PURE__*/React.createElement(Color, null, colorDisplayValue), /*#__PURE__*/React.createElement(Size, null, sizeDisplayValue), /*#__PURE__*/React.createElement(Quantity, null, labels.quantity, ": ", quantityInBasket), /*#__PURE__*/React.createElement(PriceCon, {
    withDiscount: Boolean(discountPrice)
  }, discountPrice ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Price, {
    isDiscount: true
  }, discountPrice.displayValue), /*#__PURE__*/React.createElement(Price, {
    isOldPrice: true
  }, price.displayValue), /*#__PURE__*/React.createElement(DiscountPercentageWrapper, null, /*#__PURE__*/React.createElement(DiscountPercentage, null, "-" + discountPercentage + "%")))) : /*#__PURE__*/React.createElement(Price, null, totalPriceFormatted.displayValue))));
};
var ImageContainer = styled.div.attrs({
  className: 'mr-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: 20rem;\n  min-width: 20rem;\n  @media (max-width: ", ") {\n    min-width: 12rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
});
var Item = styled(Typography).attrs({
  className: 'col-12 d-flex',
  as: 'li',
  variant: 5
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Right = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Quantity = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var Name = styled.p.attrs({
  className: 'd-block mb-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Size = styled.p.attrs({
  className: 'd-block mb-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var Color = styled.p.attrs({
  className: 'd-block mb-2'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var Row = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var Price = styled(Typography).attrs({
  className: 'mr-2'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n"])), props => props.isOldPrice && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      text-decoration: line-through;\n      opacity: 0.4;\n    "]))), props => props.isDiscount && "\n    color: " + props.theme.palette.discount + ";\n    ");
var PriceCon = styled.div.attrs({
  className: 'd-block mt-1'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), props => !props.withDiscount && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      & span {\n        color: ", ";\n      }\n    "])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}));
var DiscountPercentageWrapper = styled.div.attrs({
  className: 'px-2'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.3rem;\n  width: fit-content;\n\n  background-color: ", ";\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.discount;
});
var DiscountPercentage = styled(Typography).attrs({
  variant: 7,
  color: 'secondary'
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.2rem;\n"])));
var SKU = styled(Typography).attrs({
  variant: 7,
  className: ' mb-2'
})(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map