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

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

import React from 'react';
import { useBasketLineItem, useLocalLabels, usePrice, Link, useConfigState } from '@sentecacommerce-theme/lib';
import styled, { css } from 'styled-components';
import { LazyResponsiveImage, Typography } from '../../../../../../../Common';
export var Item = (_ref) => {
  var _images$;

  var {
    item
  } = _ref;
  var {
    lineItemId,
    images,
    name,
    slug,
    totalPrice,
    totalDiscountedPrice,
    quantityInBasket: qty,
    getAttributeByKey
  } = useBasketLineItem({
    item
  });
  var labels = useLocalLabels();
  var {
    price,
    discountPrice,
    discountPercentage
  } = usePrice({
    price: totalPrice,
    discountedPrice: totalDiscountedPrice
  });
  var {
    attributeKeys
  } = useConfigState();
  var sizeAttribute = getAttributeByKey(attributeKeys == null ? void 0 : attributeKeys.size);
  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(Container, {
    key: 'Item__' + lineItemId
  }, /*#__PURE__*/React.createElement(Link, {
    href: "/" + slug + "/p"
  }, /*#__PURE__*/React.createElement("a", {
    key: "Item__" + lineItemId + "_Link",
    style: {
      display: 'flex'
    }
  }, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {},
    imagesMap: images == null ? void 0 : images[0],
    defaultImageWidth: images == null ? void 0 : (_images$ = images[0]) == null ? void 0 : _images$.small.width,
    backgroundOverImage: true
  })), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(Name, null, name), /*#__PURE__*/React.createElement(Size, null, sizeDisplayValue), /*#__PURE__*/React.createElement(Color, null, colorDisplayValue), /*#__PURE__*/React.createElement(Quantity, null, labels.quantityLabel, ": ", qty), /*#__PURE__*/React.createElement(PriceCon, {
    withDiscount: Boolean(discountPrice)
  }, discountPrice ? /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Price, {
    isDiscount: true
  }, discountPrice == null ? void 0 : 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, price == null ? void 0 : price.displayValue))))));
};
var Container = styled.div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
var ImageContainer = styled.div.attrs({
  className: 'mr-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  max-width: 8rem;\n  min-width: 8rem;\n"])));
var Right = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Quantity = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Name = styled.span.attrs({
  className: 'd-block mb-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Size = styled.span.attrs({
  className: 'd-block mb-1'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var Color = styled.span.attrs({
  className: 'd-block mb-1'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var Row = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var Price = styled.span.attrs({
  className: 'pr-1'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), props => props.isOldPrice && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      text-decoration: line-through;\n      opacity: 0.4;\n    "]))));
var DiscountPercentageWrapper = styled.div.attrs({
  className: 'px-1'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.3rem;\n  width: fit-content;\n\n  background-color: ", ";\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.discount;
});
var DiscountPercentage = styled(Typography).attrs({
  variant: 7,
  color: 'secondary'
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.2rem;\n"])));
var PriceCon = styled.div.attrs({
  className: 'd-flex mt-1'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  > span {\n    margin-right: 0.6rem;\n  }\n  ", "\n"])), props => !props.withDiscount && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      & span {\n        color: ", ";\n      }\n    "])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}));
//# sourceMappingURL=index.js.map