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

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

import React from 'react';
import styled from 'styled-components';
import dynamic from 'next/dynamic';
import { WishlistButton, useWishlistItem, useBasket, OverflowEllipsis, useIsDesktop } from '@sentecacommerce-theme/lib';
import Link from 'next/link';
import { Button, LazyResponsiveImage, Typography, IconFavorites, IconClose } from '../../../Common';
import { Price } from '../Price';
var VariantsLoader = dynamic(() => import('../VariantsLoader').then(mod => mod.VariantsLoader), {
  ssr: false
});
export var ProductCard = (_ref) => {
  var {
    data,
    labels
  } = _ref;
  var {
    productId,
    variantId,
    collapseKey,
    name,
    brand,
    slug,
    images,
    unitPrice,
    unitDiscountedPrice,
    inventory,
    offerId
  } = useWishlistItem({
    item: data
  });
  var availableQuantity = inventory.availableQuantity;
  var {
    isExisting
  } = useBasket({
    productId: productId,
    variantId: variantId,
    offerId: offerId,
    quantity: availableQuantity
  });
  var [openVariantsLoader, setOpenVariantsLoader] = React.useState(false);
  var [selectSizeModalState, setSelectSizeModalState] = React.useState(false);

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

  var [priceState, setPriceState] = React.useState({
    price: unitPrice == null ? void 0 : unitPrice.value,
    discountedPrice: unitDiscountedPrice == null ? void 0 : unitDiscountedPrice.value
  });
  var isDesktop = useIsDesktop();
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Relative, null, /*#__PURE__*/React.createElement(Link, {
    href: "/" + slug + "/p",
    prefetch: false
  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      sm: '50vw',
      md: '33vw',
      lg: '33vw',
      xl: '540px',
      xxl: '540px'
    },
    defaultImageWidth: "50vw",
    imagesMap: images == null ? void 0 : images[0],
    alt: name
  }))), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Content, null, isDesktop ? /*#__PURE__*/React.createElement(TitleDesktop, null, name) : /*#__PURE__*/React.createElement(TitleMobile, null, name), /*#__PURE__*/React.createElement(Brand, null, brand)), /*#__PURE__*/React.createElement(Price, {
    price: unitPrice,
    discountedPrice: unitDiscountedPrice
  }), /*#__PURE__*/React.createElement(OnlyWhenHover, null, /*#__PURE__*/React.createElement("div", {
    className: "Animated--add-to-basket"
  }, /*#__PURE__*/React.createElement(AddToBasketButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
    fullWidth: true,
    variant: "primary",
    onClick: handleClick
  }, labels == null ? void 0 : labels.addBasketButton))), openVariantsLoader && /*#__PURE__*/React.createElement(VariantsLoader, {
    slug: slug,
    priceState: priceState,
    updatePrice: setPriceState,
    openSelectSizeModal: selectSizeModalState,
    handleClose: () => setSelectSizeModalState(false),
    variantId: variantId
  }))), /*#__PURE__*/React.createElement(OnlyWhenNoHover, null, /*#__PURE__*/React.createElement(WishlistButton, {
    productId: productId,
    collapseKey: collapseKey
  }, /*#__PURE__*/React.createElement(RemoveFromWishlist, null, /*#__PURE__*/React.createElement(IconClose, null)))), /*#__PURE__*/React.createElement(OnlyWhenHover, null, /*#__PURE__*/React.createElement(WishlistButton, {
    productId: productId,
    collapseKey: collapseKey
  }, /*#__PURE__*/React.createElement(FavoritesWrapper, null, /*#__PURE__*/React.createElement(IconFavorites, null))))), !isExisting ? /*#__PURE__*/React.createElement(AddToBasketButton, {
    bordered: true,
    onClick: handleClick
  }, labels == null ? void 0 : labels.addBasketShortButton) : /*#__PURE__*/React.createElement(AddToBasketButton, null, labels == null ? void 0 : labels.alreadyInBasket));
};
var Container = styled.article.attrs({
  className: 'col-6 col-lg-4 d-flex flex-column justify-content-between'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Relative = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  .Fav__wrapper {\n    opacity: 0.7;\n    @media (min-width: ", ") {\n      opacity: 0;\n    }\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .Animated--add-to-basket {\n    position: absolute;\n    width: calc(100% - 0.8rem);\n    bottom: 0;\n    left: 0.4rem;\n    transform: translateY(100%);\n    opacity: 0;\n    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .Content--container {\n    transform: translateY(0);\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @media (hover: hover) {\n    @media (min-width: ", ") {\n      &:hover {\n        .Fav__wrapper {\n          transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);\n          opacity: 1;\n        }\n\n        .Content--container {\n          transform: translateY(-6rem);\n        }\n\n        .Animated--add-to-basket {\n          transition-delay: 0.3s;\n          opacity: 1;\n        }\n      }\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var RemoveFromWishlist = styled.button.attrs({
  className: 'p-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n\n  min-height: 0 !important;\n  position: absolute;\n  top: 0.4rem;\n  left: 1rem;\n\n  & > svg {\n    width: 1rem;\n    fill: ", ";\n  }\n"])), props => props.isFavorite ? 'block' : 'none', (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
});
var AddToBasketButtonWrapper = styled.div.attrs({
  className: 'pt-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var OnlyWhenHover = styled.div.attrs({
  className: 'd-none d-lg-block'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (hover: hover) {\n    display: block;\n  }\n"])));
var OnlyWhenNoHover = styled.div.attrs({
  className: 'd-block d-lg-none'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  @media (hover: hover) {\n    display: none;\n  }\n"])));
var TitleMobile = styled(OverflowEllipsis).attrs({
  as: 'h3',
  lineHeight: 25,
  lines: 2
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  line-height: inherit;\n  font-size: inherit;\n  word-break: break-all;\n  overflow: hidden;\n"])));
var TitleDesktop = styled(Typography).attrs({
  as: 'h3'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  line-height: inherit;\n  font-size: inherit;\n  word-break: break-all;\n  overflow: hidden;\n"])));
var FavoritesWrapper = styled.button.attrs({
  className: 'p-0 Fav__wrapper'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  min-height: 0 !important;\n  position: absolute;\n  top: 1.4rem;\n  right: 1.4rem;\n\n  & > svg {\n    width: 3rem;\n    fill: ", ";\n  }\n"])), props => props.isFavorite ? props.theme.palette.primary : 'transparent');
var Brand = styled.h4(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  line-height: inherit;\n  font-size: inherit;\n  color: ", ";\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.hint;
});
var Flex = styled.div.attrs({
  className: 'row pt-3 gx-2 gy-0 Content--container'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.secondary;
});
var Content = styled(Typography).attrs({
  as: 'div',
  variant: 6,
  className: 'col-12 col-lg-7'
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    font-size: 1.6rem;\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
var AddToBasketButton = styled(Button).attrs({
  className: 'd-lg-none d-flex align-items-center justify-content-center mt-2'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-radius: 0.4rem !important;\n  font-weight: bold !important;\n"])));
//# sourceMappingURL=index.js.map