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, _templateObject23, _templateObject24;

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';
import { LazyImage } from '../../../../../Common';
import { Typography } from '../../../../../Common/Typography';
import { usePrice, useBasket, useBasketLineItem, useWishlist, WishlistButton, useConfigState, LineItemDTOStatusEnum, useGlobalLabels, OverflowEllipsis, useIsDesktop, usePixel } from '@sentecacommerce-theme/lib';
import { ActionsWrapper } from '../';
import { IconArrowDown, IconClose, IconFavorites } from '../../../../../Common/Icons';
import { VariantsLoader } from '../VariantsLoader';

var Product = (_ref) => {
  var _images$;

  var {
    item,
    close,
    errorRef
  } = _ref;
  var {
    name,
    unitPrice: price,
    unitDiscountedPrice: discountedPrice,
    quantityInBasket,
    inventory,
    productId,
    variantId,
    collapseKey,
    images,
    slug,
    getAttributeByKey,
    sku,
    offerId,
    totalPrice: total,
    totalDiscountedPrice,
    status
  } = useBasketLineItem({
    item
  });
  var {
    pixelRemoveLineItem
  } = usePixel();
  var canPurchase = status === LineItemDTOStatusEnum.CanPurchase;
  var {
    buttons,
    infoMessages
  } = useGlobalLabels();
  var [openModal, setOpenModal] = React.useState(false);
  var maxQuantity = inventory.availableQuantity;
  var hasQuantity = inventory.hasAvailableQuantity;
  var {
    price: productPrice,
    discountPercentage,
    discountPrice
  } = usePrice({
    price,
    discountedPrice
  });
  var {
    price: totalPrice,
    discountPrice: totalDiscounted
  } = usePrice({
    price: total,
    discountedPrice: totalDiscountedPrice
  });
  var [priceState, setPriceState] = React.useState({
    price: price == null ? void 0 : price.value,
    discountedPrice: discountedPrice == null ? void 0 : discountedPrice.value
  });
  var {
    removeFromBasket,
    setLineItemQuantity
  } = useBasket({
    productId,
    variantId,
    offerId: offerId,
    quantity: maxQuantity
  });
  var {
    addToWishlist,
    isInWishlist
  } = useWishlist({
    productId,
    collapseKey
  });

  var onQuantityChange = e => {
    setLineItemQuantity(+e.target.value);
  };

  var handleMoveToWishlist = () => {
    if (!isInWishlist) {
      addToWishlist();
      removeFromBasket();
      pixelRemoveLineItem({
        product: {
          id: productId,
          sku
        },
        currencyCode: price == null ? void 0 : price.currencyCode
      });
    }
  };

  var [openVariantsLoader, setOpenVariantsLoader] = React.useState(false);

  var handleClick = () => {
    setOpenVariantsLoader(true);
    setOpenModal(true);
  };

  var {
    attributeKeys
  } = useConfigState();
  var image = images == null ? void 0 : (_images$ = images[0]) == null ? void 0 : _images$.medium;
  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;

  var handleRemoveFromBasket = () => {
    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: productId,
        sku
      },
      currencyCode: price == null ? void 0 : price.currencyCode
    });
    close == null ? void 0 : close();
  };

  var isDesktop = useIsDesktop();
  return /*#__PURE__*/React.createElement(Container, {
    ref: !canPurchase ? errorRef : undefined
  }, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Link, {
    href: "/" + slug + "/p",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(LazyImage, {
    src: image == null ? void 0 : image.url,
    width: image == null ? void 0 : image.width,
    height: image == null ? void 0 : image.height,
    backgroundOverImage: true
  }), discountedPrice && /*#__PURE__*/React.createElement(DiscountPercentage, null, "-", discountPercentage, "%"))), /*#__PURE__*/React.createElement(Mobile, null, /*#__PURE__*/React.createElement(WishlistButton, {
    productId: productId,
    collapseKey: collapseKey
  }, /*#__PURE__*/React.createElement(FavoritesWrapper, {
    onClick: handleMoveToWishlist
  }, /*#__PURE__*/React.createElement(IconFavorites, null))))), /*#__PURE__*/React.createElement(DetailsContainer, null, /*#__PURE__*/React.createElement(Flex, null, !isDesktop ? /*#__PURE__*/React.createElement(OverflowEllipsis, {
    lineHeight: 25,
    lines: 2
  }, /*#__PURE__*/React.createElement(Name, null, name)) : /*#__PURE__*/React.createElement(Name, null, name), /*#__PURE__*/React.createElement(Desktop, null, hasQuantity ? /*#__PURE__*/React.createElement(QuantitySelector, null, /*#__PURE__*/React.createElement(SelectQuantity, {
    defaultValue: quantityInBasket,
    onChange: onQuantityChange
  }, Array.from({
    length: maxQuantity
  }, (_, val) => /*#__PURE__*/React.createElement("option", {
    key: "quantity__" + (val + 1),
    value: val + 1
  }, val + 1))), /*#__PURE__*/React.createElement(IconArrowDown, null)) : /*#__PURE__*/React.createElement(RedLabel, null, infoMessages.outOfStock))), openVariantsLoader && /*#__PURE__*/React.createElement(VariantsLoader, {
    item: item,
    slug: slug,
    openSelectSizeModal: openModal,
    handleClose: () => setOpenModal(false),
    priceState: priceState,
    updatePrice: setPriceState,
    variantId: variantId,
    hasQuantity: hasQuantity
  }), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(AttributesContainer, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(SKU, null, infoMessages.sku, ": ", sku), colorAttribute && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorDisplay, null, colorDisplayValue)), sizeAttribute && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
    className: "d-flex"
  }, /*#__PURE__*/React.createElement("span", null, sizeDisplayValue, " "), /*#__PURE__*/React.createElement(SelectSize, {
    onClick: handleClick
  }, buttons.changeSize)))), /*#__PURE__*/React.createElement(Mobile, null, /*#__PURE__*/React.createElement("div", {
    className: "pt-2"
  }), /*#__PURE__*/React.createElement(QuantitySelector, null, /*#__PURE__*/React.createElement(SelectQuantity, {
    defaultValue: quantityInBasket,
    onChange: onQuantityChange
  }, Array.from({
    length: maxQuantity
  }, (_, val) => /*#__PURE__*/React.createElement("option", {
    key: "quantity__" + (val + 1),
    value: val + 1
  }, val + 1))), /*#__PURE__*/React.createElement(IconArrowDown, null)))), quantityInBasket > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, discountPrice ? /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(SinglePriceLabel, null, "\u0417\u0430 1\u0431\u0440: "), /*#__PURE__*/React.createElement(TotalOldPrice, null, productPrice.displayValue), /*#__PURE__*/React.createElement(SinglePrice, {
    discounted: true
  }, discountPrice.displayValue)) : /*#__PURE__*/React.createElement(SinglePrice, null, productPrice.displayValue))), /*#__PURE__*/React.createElement(Mobile, null, /*#__PURE__*/React.createElement(RemoveFromBasketContainer, {
    onClick: handleRemoveFromBasket
  }, /*#__PURE__*/React.createElement(IconClose, {
    style: {
      width: '1.2rem'
    }
  }))), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Desktop, null, /*#__PURE__*/React.createElement(ActionsWrapper, {
    isAlreadyInWishlist: Boolean(isInWishlist),
    handleMoveToWishlist: handleMoveToWishlist,
    handleRemoveFromBasket: handleRemoveFromBasket
  })), /*#__PURE__*/React.createElement(Price, {
    mobile: true
  }, discountPrice ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OldPrice, null, productPrice.displayValue), /*#__PURE__*/React.createElement(TotalPrice, {
    discounted: true
  }, discountPrice.displayValue)) : /*#__PURE__*/React.createElement(TotalPrice, null, productPrice.displayValue)), /*#__PURE__*/React.createElement(Price, null, discountPrice ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OldPrice, null, totalPrice.displayValue), /*#__PURE__*/React.createElement(TotalPrice, {
    discounted: true
  }, totalDiscounted == null ? void 0 : totalDiscounted.displayValue)) : /*#__PURE__*/React.createElement(TotalPrice, null, totalDiscounted == null ? void 0 : totalDiscounted.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 FavoritesWrapper = styled.button.attrs({
  className: 'p-0 Fav__wrapper'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  min-height: 0 !important;\n  position: absolute;\n  top: -0.4rem;\n  right: 0.1rem;\n\n  & > svg {\n    width: 3rem;\n    fill: ", ";\n  }\n\n  & path {\n    stroke-width: 1.5;\n  }\n"])), props => props.isFavorite ? props.theme.palette.primary : 'transparent');
var RemoveFromBasketContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -0.4rem;\n  right: -0.7rem;\n  width: 3rem;\n  height: 3rem;\n  background-color: ", ";\n  border-radius: 50%;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
});
var Name = styled.span.attrs({
  className: 'd-block pr-4 pr-md-1'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  word-break: break-all;\n"])));
var Desktop = styled.div.attrs({
  className: 'd-none d-md-block'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  font-size: 1.3rem;\n"])));
var Mobile = styled.div.attrs({
  className: 'd-md-none'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var ImageWrapper = styled.div.attrs({
  className: 'mr-4'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 14rem;\n  min-width: 14rem;\n\n  & img {\n    width: 100%;\n  }\n\n  @media (max-width: ", ") {\n    min-width: 9.6rem;\n    width: 9.6rem;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.sm.max;
});
var DetailsContainer = styled.div.attrs({
  className: 'd-flex flex-column justify-content-between flex-grow-1'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var QuantitySelector = styled.div.attrs({
  className: 'd-flex'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n  border: 0.1rem solid ", ";\n  width: 5.6rem;\n  height: 3rem;\n\n  & svg {\n    width: 1.4rem;\n    height: 1.4rem;\n    stroke-width: 2;\n    position: absolute;\n    right: 1rem;\n    top: calc(50% - 0.8rem);\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.disabled;
});
var AttributesContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  & li {\n    margin-bottom: 0.4rem;\n    list-style: none;\n    font-size: 1.4rem;\n    line-height: 1.3;\n  }\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
});
var SKU = styled(Typography).attrs({
  variant: '7',
  className: 'mb-2'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  font-size: 1.15rem;\n  color: ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.hint;
});
var Flex = styled.div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  &:last-of-type {\n    margin-top: auto;\n  }\n"])));
var SelectQuantity = styled.select.attrs({
  className: 'pr-1'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-left: 1rem;\n  height: 100%;\n  width: 100%;\n  color: ", ";\n  background: none;\n  border: 0px;\n  border-radius: 0.2rem;\n  appearance: none;\n  box-shadow: none;\n  outline: 0px;\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.hint;
});
var SelectSize = styled.div.attrs({
  className: 'ml-2'
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  font-size: 1.1rem;\n  line-height: 1.8rem;\n  text-decoration: underline;\n  cursor: pointer;\n"])));
var SinglePrice = styled(Typography).attrs({
  className: 'ml-auto d-none d-md-flex',
  variant: 6
})(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), props => props.discounted && "\n  color: " + props.theme.palette.discount + ";\n  ");
var TotalPrice = styled(Typography).attrs({
  className: '',
  variant: 5
})(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), props => props.discounted && "\n  color: " + props.theme.palette.discount + ";\n  ");
var Col = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose([""])));
var Price = styled(Typography).attrs({
  className: ' ml-auto',
  variant: 5
})(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  align-items: baseline;\n  @media (max-width: ", ") {\n    display: ", ";\n  }\n  > * {\n    margin-left: 1rem;\n  }\n"])), props => props.mobile ? 'none' : 'flex', (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.breakpoints.sm.max;
}, props => props.mobile ? 'flex' : 'none');
var TotalOldPrice = styled(Typography).attrs({
  variant: 7,
  className: 'mr-2 d-none d-md-block'
})(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  line-height: 2.4rem;\n  text-decoration: line-through;\n  opacity: 0.5;\n"])));
var OldPrice = styled(Typography).attrs({
  variant: 6
})(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  line-height: 2.4rem;\n  text-decoration: line-through;\n  opacity: 0.5;\n"])));
var DiscountPercentage = styled(Typography).attrs({
  variant: 6,
  color: 'secondary',
  className: 'px-2 mb-1 d-flex align-items-center'
})(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: fit-content;\n  background-color: ", ";\n  @media (max-width: ", ") {\n    left: 0;\n  }\n"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.discount;
}, (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.breakpoints.sm.max;
});
var RedLabel = styled.span.attrs({
  className: 'd-flex align-items-center mr-4'
})(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-height: 4.4rem;\n"])), (_ref12) => {
  var {
    theme
  } = _ref12;
  return theme.palette.danger;
});
var ColorDisplay = styled.li.attrs({
  className: 'mb-2'
})(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose([""])));
var SinglePriceLabel = styled(Typography).attrs({
  className: 'ml-auto d-none d-md-flex mr-2',
  variant: 7
})(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose([""])));
export { Product };
//# sourceMappingURL=index.js.map