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

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

import React, { useState } from 'react';
import { WishlistButton, useLineItem, usePrice, Link, useConfigState } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { VariantsCarousel } from './Components';
import { Price, IconFavorites, LazyResponsiveImage } from '../';
import { Typography } from '../Typography';
export var LineItem = (_ref) => {
  var _getAttributeByKey$co, _getAttributeByKey, _getAttributeByKey2, _getAttributeByKey3;

  var {
    data,
    hideVariants,
    carousel
  } = _ref;
  var [isHovered, setIsHovered] = useState(false);
  var {
    price: lineItemPrice,
    discountedPrice: lineItemDiscountedPrice,
    name,
    slug,
    _id,
    brand,
    getCustomFieldByKey,
    collapseKey,
    images: productImages,
    getAttributeByKey,
    variantId,
    labels
  } = useLineItem(data);
  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(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(str => 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(str => 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(str => str.includes(LabelTypeEnum.Top) || str.includes(LabelTypeEnum.Bottom))) == null ? void 0 : _el$tags3$filter[0];
    return {
      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 = 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 [images] = useState(productImages);
  var {
    price,
    discountPrice,
    discountPercentage
  } = usePrice({
    price: lineItemPrice,
    discountedPrice: lineItemDiscountedPrice
  });
  var [priceState] = useState({
    price: price == null ? void 0 : price.value,
    discountedPrice: discountPrice == null ? void 0 : discountPrice.value
  });
  var {
    attributeKeys,
    customFieldKeys
  } = useConfigState();
  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((a, b) => 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.createElement(Container, {
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => setIsHovered(false)
  }, /*#__PURE__*/React.createElement(Relative, null, /*#__PURE__*/React.createElement(Link, {
    passHref: true,
    href: "/" + slug + "/p?variant=" + variantId
  }, /*#__PURE__*/React.createElement(ImageContainer, {
    isHovered: showVariants
  }, /*#__PURE__*/React.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.createElement(LabelContainer, {
    position: getLabelPosition('bottom-right')
  }, /*#__PURE__*/React.createElement(RedLabel, null, "-", discountPercentage, "%")), mappedLabels == null ? void 0 : mappedLabels.map(label => {
    return /*#__PURE__*/React.createElement(LabelContainer, {
      position: getLabelPosition(label.position),
      key: label.id
    }, /*#__PURE__*/React.createElement(Label, {
      textColor: label.textColor,
      background: label.backgroundColor
    }, label.name, ' '));
  }))), /*#__PURE__*/React.createElement(ContentContainer, {
    isHovered: showVariants
  }, /*#__PURE__*/React.createElement(Link, {
    passHref: true,
    href: "/" + slug + "/p"
  }, /*#__PURE__*/React.createElement(ContentAnchor, {
    className: "d-flex flex-column",
    style: {
      height: '100%'
    }
  }, /*#__PURE__*/React.createElement(Brand, null, brand == null ? void 0 : brand.name), /*#__PURE__*/React.createElement(ProductInfoContainer, null, /*#__PURE__*/React.createElement(ProductTitle, null, name)), /*#__PURE__*/React.createElement(BottomWrapper, null, /*#__PURE__*/React.createElement(PriceWrapper, null, /*#__PURE__*/React.createElement(Price, {
    price: priceState.price,
    size: "tiny",
    currency: price == null ? void 0 : price.currency,
    hideDiscountPercentage: true,
    discountedPrice: priceState.discountedPrice
  })), /*#__PURE__*/React.createElement(Variants, null, /*#__PURE__*/React.createElement(ColorsWrapper, {
    isHovered: isHovered
  }, /*#__PURE__*/React.createElement(Colors, null, colorsCount > 3 ? colors == null ? void 0 : colors.slice(0, 3).map((col, i) => {
    var hex = col.extra.rgb;
    return /*#__PURE__*/React.createElement(Color, {
      key: "Color_" + hex + "--" + i,
      hex: hex
    });
  }) : colors == null ? void 0 : colors.map((col, i) => {
    var hex = col.extra.rgb;
    return /*#__PURE__*/React.createElement(Color, {
      key: "Color_" + hex + "--" + i,
      hex: hex
    });
  }), colorsCount > 3 && /*#__PURE__*/React.createElement(More, null, " + ", colorsCount - 3, " more"))), /*#__PURE__*/React.createElement(SizesWrapper, {
    isHovered: isHovered
  }, /*#__PURE__*/React.createElement(VariantsCarousel, {
    axis: "x",
    slides: sortedSizes,
    renderSlide: size => {
      return /*#__PURE__*/React.createElement(Size, null, /*#__PURE__*/React.createElement("span", null, sizes[size].label));
    }
  })))))))), /*#__PURE__*/React.createElement(WishlistButton, {
    productId: _id,
    collapseKey: collapseKey
  }, /*#__PURE__*/React.createElement(FavoritesWrapper, null, /*#__PURE__*/React.createElement(IconFavorites, null))));
};
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 = styled.a.attrs({
  className: 'd-flex flex-column'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 100%;\n"])));
var Brand = styled.p.attrs({
  className: 'pt-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  ", ";\n  z-index: 20;\n"])), (_ref3) => {
  var {
    position
  } = _ref3;
  return position;
});
var Label = styled.p.attrs({
  className: 'd-flex align-items-center py-1 px-2 mb-1 '
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    background
  } = _ref4;
  return background;
}, (_ref5) => {
  var {
    textColor
  } = _ref5;
  return textColor;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.min;
});
var RedLabel = styled(Label)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.discount;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.secondary;
});
var WhiteLabel = styled(Label)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  --line-item-label-background: ", ";\n  --line-item-label-color: ", ";\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.secondary;
}, (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.primary;
});
var Container = styled.article(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.palette.secondary;
}, (_ref12) => {
  var {
    theme
  } = _ref12;
  return theme.breakpoints.md.max;
}, (_ref13) => {
  var {
    theme
  } = _ref13;
  return theme.breakpoints.md.min;
}, EASING);
var ContentContainer = styled.div.attrs({
  className: 'px-2 px-md-0 pt-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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"])), (_ref14) => {
  var {
    theme
  } = _ref14;
  return theme.palette.secondary;
}, CONTENT_HEIGHT, EASING, (_ref15) => {
  var {
    theme
  } = _ref15;
  return theme.breakpoints.md.min;
}, DESKTOP_CONTENT_HEIGHT);
var FavoritesWrapper = styled.button.attrs({
  className: 'pr-2 pt-1 Fav__wrapper d-flex justify-content-end'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\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"])), props => props.isFavorite ? props.theme.palette.primary : 'transparent', (_ref16) => {
  var {
    theme
  } = _ref16;
  return theme.breakpoints.md.min;
});
var Relative = styled.div.attrs({
  className: 'd-flex flex-column'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-bottom: ", ";\n\n  @media (min-width: ", ") {\n    padding-bottom: ", ";\n  }\n"])), CONTENT_HEIGHT, (_ref17) => {
  var {
    theme
  } = _ref17;
  return theme.breakpoints.md.min;
}, DESKTOP_CONTENT_HEIGHT);
var ImageContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  width: 100%;\n\n  position: relative;\n"])));
var ProductInfoContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  @media (max-width: ", ") {\n    min-height: 2rem;\n  }\n"])), (_ref18) => {
  var {
    theme
  } = _ref18;
  return theme.breakpoints.lg.max;
});
var ProductTitle = styled(Typography).attrs({
  variant: 'base',
  as: 'span',
  className: 'pt-1'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\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"])), (_ref19) => {
  var {
    theme
  } = _ref19;
  return theme.breakpoints.md.min;
});
var BottomWrapper = styled.div.attrs({
  className: 'flex-column align-items-center'
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var Variants = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose([""])));
var PriceWrapper = styled.div.attrs({
  className: 'mt-2 mr-auto'
})(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\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"])), (_ref20) => {
  var {
    theme
  } = _ref20;
  return theme.palette.primary;
}, (_ref21) => {
  var {
    theme
  } = _ref21;
  return theme.breakpoints.md.max;
});
var ColorsWrapper = styled.div.attrs({
  className: 'd-flex align-items-center mt-3'
})(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\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"])), (_ref22) => {
  var {
    theme
  } = _ref22;
  return theme.breakpoints.lg.min;
}, props => props.isHovered ? '0' : '1');
var Colors = styled.ul.attrs({
  className: 'd-flex'
})(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose([""])));
var Color = styled.li.attrs({
  className: 'mr-2  '
})(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  background: ", ";\n"])), props => props.hex === '#ffffff' ? '#aaa' : 'none', props => props.hex);
var More = styled(Typography).attrs({
  variant: 5
})(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.5rem;\n"])), (_ref23) => {
  var {
    theme
  } = _ref23;
  return theme.palette.hint;
});
var SizesWrapper = styled.div.attrs({
  className: 'd-flex align-items-center mt-3'
})(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\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"])), (_ref24) => {
  var {
    theme
  } = _ref24;
  return theme.palette.hint;
}, (_ref25) => {
  var {
    theme
  } = _ref25;
  return theme.palette.secondary;
}, EASING, (_ref26) => {
  var {
    theme
  } = _ref26;
  return theme.breakpoints.lg.min;
}, props => props.isHovered ? '1' : '0', props => props.isHovered ? '0' : '100%');
var Size = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\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"])), (_ref27) => {
  var {
    theme
  } = _ref27;
  return theme.palette.hint;
}, (_ref28) => {
  var {
    theme
  } = _ref28;
  return theme.palette.hint;
}, props => props.isAvailable ? 1 : 0.6, props => props.isAvailable ? 'all' : 'none', (_ref29) => {
  var {
    theme
  } = _ref29;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map