"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

var _Components = require("./Components");

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

var _Typography = require("../Typography");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;

var LineItem = function LineItem(_ref) {
  var _getAttributeByKey$co, _getAttributeByKey, _getAttributeByKey2, _getAttributeByKey3;

  var data = _ref.data,
      hideVariants = _ref.hideVariants,
      carousel = _ref.carousel;

  var _useState = (0, _react.useState)(false),
      isHovered = _useState[0],
      setIsHovered = _useState[1];

  var _useLineItem = (0, _lib.useLineItem)(data),
      lineItemPrice = _useLineItem.price,
      lineItemDiscountedPrice = _useLineItem.discountedPrice,
      name = _useLineItem.name,
      slug = _useLineItem.slug,
      _id = _useLineItem._id,
      brand = _useLineItem.brand,
      getCustomFieldByKey = _useLineItem.getCustomFieldByKey,
      collapseKey = _useLineItem.collapseKey,
      productImages = _useLineItem.images,
      getAttributeByKey = _useLineItem.getAttributeByKey,
      variantId = _useLineItem.variantId,
      labels = _useLineItem.labels;

  var LabelTypeEnum;

  (function (LabelTypeEnum) {
    LabelTypeEnum["Top"] = "top";
    LabelTypeEnum["Bottom"] = "bottom";
    LabelTypeEnum["Background"] = "background";
    LabelTypeEnum["Text"] = "text";
  })(LabelTypeEnum || (LabelTypeEnum = {}));

  var mappedLabels = labels == null ? void 0 : labels.map(function (el) {
    var _el$tags, _el$tags$filter, _el$tags$filter$, _el$tags2, _el$tags2$filter, _el$tags2$filter$, _el$tags3, _el$tags3$filter;

    var backgroundColor = (_el$tags = el.tags) == null ? void 0 : (_el$tags$filter = _el$tags.filter(function (str) {
      return str.includes(LabelTypeEnum.Background);
    })) == null ? void 0 : (_el$tags$filter$ = _el$tags$filter[0]) == null ? void 0 : _el$tags$filter$.split('-');
    var textColor = (_el$tags2 = el.tags) == null ? void 0 : (_el$tags2$filter = _el$tags2.filter(function (str) {
      return str.includes(LabelTypeEnum.Text);
    })) == null ? void 0 : (_el$tags2$filter$ = _el$tags2$filter[0]) == null ? void 0 : _el$tags2$filter$.split('-');
    var position = (_el$tags3 = el.tags) == null ? void 0 : (_el$tags3$filter = _el$tags3.filter(function (str) {
      return str.includes(LabelTypeEnum.Top) || str.includes(LabelTypeEnum.Bottom);
    })) == null ? void 0 : _el$tags3$filter[0];
    return {
      position: position,
      textColor: textColor == null ? void 0 : textColor[textColor.length - 1],
      backgroundColor: backgroundColor == null ? void 0 : backgroundColor[backgroundColor.length - 1],
      name: el.name,
      description: el.description,
      id: el.id
    };
  });
  var posCount = {
    'top-left': 0,
    'bottom-left': 0,
    'top-right': 0,
    'bottom-right': 0
  };

  var getLabelPosition = function getLabelPosition(pos) {
    var position = '';

    if (pos === 'top-left') {
      position = "top: " + (3 + posCount[pos] * 3) + "rem; left:0;";
    }

    if (pos === 'top-right') {
      position = "top: " + (3 + posCount[pos] * 3) + "rem; right: 0;";
    }

    if (pos === 'bottom-left') {
      position = "bottom: " + (3 + posCount[pos] * 3) + "rem; left: 0;";
    }

    if (pos === 'bottom-right') {
      position = "bottom: " + (3 + posCount[pos] * 3) + "rem; right: 0;";
    }

    posCount[pos]++;
    return position;
  };

  var _useState2 = (0, _react.useState)(productImages),
      images = _useState2[0];

  var _usePrice = (0, _lib.usePrice)({
    price: lineItemPrice,
    discountedPrice: lineItemDiscountedPrice
  }),
      price = _usePrice.price,
      discountPrice = _usePrice.discountPrice,
      discountPercentage = _usePrice.discountPercentage;

  var _useState3 = (0, _react.useState)({
    price: price == null ? void 0 : price.value,
    discountedPrice: discountPrice == null ? void 0 : discountPrice.value
  }),
      priceState = _useState3[0];

  var _useConfigState = (0, _lib.useConfigState)(),
      attributeKeys = _useConfigState.attributeKeys,
      customFieldKeys = _useConfigState.customFieldKeys;

  var colorsCount = (_getAttributeByKey$co = (_getAttributeByKey = getAttributeByKey(attributeKeys.color)) == null ? void 0 : _getAttributeByKey.count) != null ? _getAttributeByKey$co : 0;
  var colors = (_getAttributeByKey2 = getAttributeByKey(attributeKeys.color)) == null ? void 0 : _getAttributeByKey2.elements;
  var sizes = (_getAttributeByKey3 = getAttributeByKey(attributeKeys.size)) == null ? void 0 : _getAttributeByKey3.elements;
  var sortedSizes = Object.keys(sizes != null ? sizes : {}).sort(function (a, b) {
    return sizes[a].extra.sort - sizes[b].extra.sort;
  });
  if (!data) return null;
  var showVariants = !hideVariants && isHovered;
  var isNew = Boolean(getCustomFieldByKey(customFieldKeys.isNew));
  return /*#__PURE__*/_react["default"].createElement(Container, {
    onMouseEnter: function onMouseEnter() {
      return setIsHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setIsHovered(false);
    }
  }, /*#__PURE__*/_react["default"].createElement(Relative, null, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    passHref: true,
    href: "/" + slug + "/p?variant=" + variantId
  }, /*#__PURE__*/_react["default"].createElement(ImageContainer, {
    isHovered: showVariants
  }, /*#__PURE__*/_react["default"].createElement(_.LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      lg: '20vw',
      xl: '20vw',
      xxl: '20vw'
    },
    defaultImageWidth: "40vw",
    imagesMap: images == null ? void 0 : images[0],
    alt: name
  }), Boolean(discountPercentage) && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
    position: getLabelPosition('bottom-right')
  }, /*#__PURE__*/_react["default"].createElement(RedLabel, null, "-", discountPercentage, "%")), mappedLabels == null ? void 0 : mappedLabels.map(function (label) {
    return /*#__PURE__*/_react["default"].createElement(LabelContainer, {
      position: getLabelPosition(label.position),
      key: label.id
    }, /*#__PURE__*/_react["default"].createElement(Label, {
      textColor: label.textColor,
      background: label.backgroundColor
    }, label.name, ' '));
  }))), /*#__PURE__*/_react["default"].createElement(ContentContainer, {
    isHovered: showVariants
  }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    passHref: true,
    href: "/" + slug + "/p"
  }, /*#__PURE__*/_react["default"].createElement(ContentAnchor, {
    className: "d-flex flex-column",
    style: {
      height: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Brand, null, brand == null ? void 0 : brand.name), /*#__PURE__*/_react["default"].createElement(ProductInfoContainer, null, /*#__PURE__*/_react["default"].createElement(ProductTitle, null, name)), /*#__PURE__*/_react["default"].createElement(BottomWrapper, null, /*#__PURE__*/_react["default"].createElement(PriceWrapper, null, /*#__PURE__*/_react["default"].createElement(_.Price, {
    price: priceState.price,
    size: "tiny",
    currency: price == null ? void 0 : price.currency,
    hideDiscountPercentage: true,
    discountedPrice: priceState.discountedPrice
  })), /*#__PURE__*/_react["default"].createElement(Variants, null, /*#__PURE__*/_react["default"].createElement(ColorsWrapper, {
    isHovered: isHovered
  }, /*#__PURE__*/_react["default"].createElement(Colors, null, colorsCount > 3 ? colors == null ? void 0 : colors.slice(0, 3).map(function (col, i) {
    var hex = col.extra.rgb;
    return /*#__PURE__*/_react["default"].createElement(Color, {
      key: "Color_" + hex + "--" + i,
      hex: hex
    });
  }) : colors == null ? void 0 : colors.map(function (col, i) {
    var hex = col.extra.rgb;
    return /*#__PURE__*/_react["default"].createElement(Color, {
      key: "Color_" + hex + "--" + i,
      hex: hex
    });
  }), colorsCount > 3 && /*#__PURE__*/_react["default"].createElement(More, null, " + ", colorsCount - 3, " more"))), /*#__PURE__*/_react["default"].createElement(SizesWrapper, {
    isHovered: isHovered
  }, /*#__PURE__*/_react["default"].createElement(_Components.VariantsCarousel, {
    axis: "x",
    slides: sortedSizes,
    renderSlide: function renderSlide(size) {
      return /*#__PURE__*/_react["default"].createElement(Size, null, /*#__PURE__*/_react["default"].createElement("span", null, sizes[size].label));
    }
  })))))))), /*#__PURE__*/_react["default"].createElement(_lib.WishlistButton, {
    productId: _id,
    collapseKey: collapseKey
  }, /*#__PURE__*/_react["default"].createElement(FavoritesWrapper, null, /*#__PURE__*/_react["default"].createElement(_.IconFavorites, null))));
};

exports.LineItem = LineItem;
var EASING = '0.4s cubic-bezier(0.25, 0.1, 0.25, 1)';
var CONTENT_HEIGHT = '13.5rem';
var DESKTOP_CONTENT_HEIGHT = '14.5rem';

var ContentAnchor = _styledComponents["default"].a.attrs({
  className: 'd-flex flex-column'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n"])));

var Brand = _styledComponents["default"].p.attrs({
  className: 'pt-1'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 600;\n  line-height: 1.2;\n  font-size: 1.2rem !important;\n\n  @media (min-width: ", ") {\n    font-size: 1.6rem !important;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
}); // const LabelsContainer = styled.div`
//   position: absolute;
//   bottom: 2rem;
//   left: 0;
// `
// const Label = styled.p.attrs({
//   className: 'd-flex align-items-center py-1 pl-3 pr-2 mb-1 pl-md-4',
// })`
//   background: var(--line-item-label-background);
//   color: var(--line-item-label-color);
//   line-height: 1.2;
//   font-size: 1.2rem !important;
//   @media (min-width: ${({ theme }) => theme.breakpoints.md.min}) {
//     font-size: 1.4rem !important;
//   }
// `


var LabelContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  ", ";\n  z-index: 20;\n"])), function (_ref3) {
  var position = _ref3.position;
  return position;
});

var Label = _styledComponents["default"].p.attrs({
  className: 'd-flex align-items-center py-1 px-2 mb-1 '
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  color: ", ";\n\n  line-height: 1.2;\n  font-size: 1.2rem !important;\n\n  @media (min-width: ", ") {\n    font-size: 1.4rem !important;\n  }\n"])), function (_ref4) {
  var background = _ref4.background;
  return background;
}, function (_ref5) {
  var textColor = _ref5.textColor;
  return textColor;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.min;
});

var RedLabel = (0, _styledComponents["default"])(Label)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  color: ", ";\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.discount;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.secondary;
});
var WhiteLabel = (0, _styledComponents["default"])(Label)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  --line-item-label-background: ", ";\n  --line-item-label-color: ", ";\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.secondary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.primary;
});

var Container = _styledComponents["default"].article(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: none;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  background-color: ", ";\n  cursor: pointer;\n\n  @media (max-width: ", ") {\n    & * {\n      font-size: 1.4rem;\n    }\n  }\n\n  @media (min-width: ", ") {\n    & * {\n      font-size: 1.8rem;\n    }\n\n    @media (hover: hover) {\n      .Fav__wrapper {\n        opacity: 0;\n        transition: opacity ", ";\n      }\n    }\n  }\n\n  &:hover {\n    .Fav__wrapper {\n      opacity: 1;\n    }\n  }\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette.secondary;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.breakpoints.md.max;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.breakpoints.md.min;
}, EASING);

var ContentContainer = _styledComponents["default"].div.attrs({
  className: 'px-2 px-md-0 pt-2'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: ", ";\n  z-index: 10;\n  transition: transform ", ";\n\n  @media (min-width: ", ") {\n    height: ", ";\n  }\n\n  @media (hover: hover) {\n  }\n"])), function (_ref14) {
  var theme = _ref14.theme;
  return theme.palette.secondary;
}, CONTENT_HEIGHT, EASING, function (_ref15) {
  var theme = _ref15.theme;
  return theme.breakpoints.md.min;
}, DESKTOP_CONTENT_HEIGHT);

var FavoritesWrapper = _styledComponents["default"].button.attrs({
  className: 'pr-2 pt-1 Fav__wrapper d-flex justify-content-end'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  min-width: 4rem;\n  min-height: 4rem;\n  top: 0;\n  right: 0;\n  z-index: 1;\n  opacity: 0.5;\n\n  & > svg {\n    width: 2.4rem;\n\n    fill: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding: 1.4rem 1.4rem 0 0 !important;\n\n    & > svg {\n      width: 3rem;\n    }\n  }\n"])), function (props) {
  return props.isFavorite ? props.theme.palette.primary : 'transparent';
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.breakpoints.md.min;
});

var Relative = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  padding-bottom: ", ";\n\n  @media (min-width: ", ") {\n    padding-bottom: ", ";\n  }\n"])), CONTENT_HEIGHT, function (_ref17) {
  var theme = _ref17.theme;
  return theme.breakpoints.md.min;
}, DESKTOP_CONTENT_HEIGHT);

var ImageContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  width: 100%;\n\n  position: relative;\n"])));

var ProductInfoContainer = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  cursor: pointer;\n  @media (max-width: ", ") {\n    min-height: 2rem;\n  }\n"])), function (_ref18) {
  var theme = _ref18.theme;
  return theme.breakpoints.lg.max;
});

var ProductTitle = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 'base',
  as: 'span',
  className: 'pt-1'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 1.2rem;\n  margin-bottom: 0;\n  white-space: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-height: 2rem;\n  height: 100%;\n  letter-spacing: normal;\n  @media (min-width: ", ") {\n    font-size: 1.8rem !important;\n  }\n"])), function (_ref19) {
  var theme = _ref19.theme;
  return theme.breakpoints.md.min;
});

var BottomWrapper = _styledComponents["default"].div.attrs({
  className: 'flex-column align-items-center'
})(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var Variants = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var PriceWrapper = _styledComponents["default"].div.attrs({
  className: 'mt-2 mr-auto'
})(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.8rem;\n\n  @media (max-width: ", ") {\n    & * {\n      font-size: 1.4rem !important;\n    }\n  }\n\n  & * {\n    font-weight: 600;\n  }\n\n  & > div > span {\n    align-items: center;\n  }\n\n  & [data-initial-price] span {\n    font-weight: 400;\n  }\n\n  & [data-initial-price] {\n    margin-left: 0.6rem !important;\n    opacity: 0.5;\n  }\n"])), function (_ref20) {
  var theme = _ref20.theme;
  return theme.palette.primary;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.breakpoints.md.max;
});

var ColorsWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center mt-3'
})(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);\n  @media (min-width: ", ") {\n    opacity: ", ";\n  }\n"])), function (_ref22) {
  var theme = _ref22.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.isHovered ? '0' : '1';
});

var Colors = _styledComponents["default"].ul.attrs({
  className: 'd-flex'
})(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Color = _styledComponents["default"].li.attrs({
  className: 'mr-2  '
})(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 2rem;\n  height: 2rem;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  background: ", ";\n"])), function (props) {
  return props.hex === '#ffffff' ? '#aaa' : 'none';
}, function (props) {
  return props.hex;
});

var More = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 5
})(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.5rem;\n"])), function (_ref23) {
  var theme = _ref23.theme;
  return theme.palette.hint;
});

var SizesWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center mt-3'
})(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  color: ", ";\n  top: 3.4rem;\n  background: ", ";\n  width: 100%;\n  transition: all ", ";\n  opacity: 0;\n  @media (min-width: ", ") {\n    opacity: ", ";\n    transform: translateY(", ");\n  }\n"])), function (_ref24) {
  var theme = _ref24.theme;
  return theme.palette.hint;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.palette.secondary;
}, EASING, function (_ref26) {
  var theme = _ref26.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.isHovered ? '1' : '0';
}, function (props) {
  return props.isHovered ? '0' : '100%';
});

var Size = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  border: 0.1rem solid ", ";\n  border-radius: 0.4rem;\n  padding: 0.6rem 1rem;\n  line-height: 1;\n  width: fit-content;\n  white-space: nowrap;\n\n  opacity: ", ";\n  pointer-events: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_ref27) {
  var theme = _ref27.theme;
  return theme.palette.hint;
}, function (_ref28) {
  var theme = _ref28.theme;
  return theme.palette.hint;
}, function (props) {
  return props.isAvailable ? 1 : 0.6;
}, function (props) {
  return props.isAvailable ? 'all' : 'none';
}, function (_ref29) {
  var theme = _ref29.theme;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map