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

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

import React from 'react';
import styled from 'styled-components';
import { useBasketLineItem, useBasket, useConfigState, usePixel } from '@sentecacommerce-theme/lib';
import { LazyResponsiveImage, Typography } from '../../../../../Common';
export var ProductCard = (_ref) => {
  var {
    item,
    setRestock,
    setVariant,
    setProducts,
    index,
    products,
    update,
    lastItem
  } = _ref;
  var {
    name,
    images,
    brand,
    sku,
    productId,
    variantId,
    offerId,
    inventory,
    getAttributeByKey,
    quantityInBasket,
    unitPrice: price
  } = useBasketLineItem({
    item
  });
  var {
    pixelRemoveLineItem
  } = usePixel();
  var {
    attributeKeys
  } = useConfigState();
  var maxQuantity = inventory == null ? void 0 : inventory.availableQuantity;
  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 {
    removeFromBasket
  } = useBasket({
    productId,
    variantId,
    offerId: offerId,
    quantity: maxQuantity
  });

  var handleRemoveFromBasket = () => {
    products == null ? void 0 : products.splice(index, 1);
    setProducts(products);
    update();
    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: productId,
        sku: sku
      },
      currencyCode: price == null ? void 0 : price.currencyCode
    });
  };

  var handleRestock = () => {
    setVariant({
      size: sizeDisplayValue,
      color: colorDisplayValue,
      quantity: quantityInBasket,
      productId: productId,
      variantId: variantId,
      offerId: offerId != null ? offerId : '',
      sku: sku,
      images: images,
      name: name,
      currencyCode: price == null ? void 0 : price.currencyCode
    });
    setRestock();
  };

  return /*#__PURE__*/React.createElement(Container, {
    isLast: lastItem
  }, /*#__PURE__*/React.createElement(Brand, {
    mobile: true
  }, brand == null ? void 0 : brand.name), /*#__PURE__*/React.createElement(Name, {
    mobile: true
  }, name), /*#__PURE__*/React.createElement("span", {
    className: "d-flex"
  }, /*#__PURE__*/React.createElement(Image, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      lg: '20vw',
      xl: '20vw',
      xxl: '20vw'
    },
    defaultImageWidth: "10vw",
    imagesMap: images == null ? void 0 : images[0],
    alt: name
  })), /*#__PURE__*/React.createElement(ProductInfo, null, /*#__PURE__*/React.createElement(Brand, null, brand == null ? void 0 : brand.name), /*#__PURE__*/React.createElement(Name, null, name), /*#__PURE__*/React.createElement("span", {
    className: "my-2"
  }, /*#__PURE__*/React.createElement(Attrs, null, sizeDisplayValue), /*#__PURE__*/React.createElement(Attrs, null, colorDisplayValue)), /*#__PURE__*/React.createElement(SKU, null, "SKU: ", sku), /*#__PURE__*/React.createElement(CTA, null, /*#__PURE__*/React.createElement(Label, {
    onClick: handleRemoveFromBasket
  }, "Remove product"), /*#__PURE__*/React.createElement(Label, {
    onClick: handleRestock
  }, "Notify me when back in stock")))), /*#__PURE__*/React.createElement(CTA, {
    mobile: true
  }, /*#__PURE__*/React.createElement(Label, {
    onClick: handleRemoveFromBasket
  }, "Remove product"), /*#__PURE__*/React.createElement(Label, {
    onClick: handleRestock
  }, "Notify me when back in stock")), /*#__PURE__*/React.createElement(Divider, {
    isLast: lastItem
  }));
};
var Container = styled.div.attrs(props => {
  return {
    className: "d-flex flex-column flex-lg-row " + (props.isLast ? '' : 'my-lg-4')
  };
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Image = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  min-width: 15rem;\n  @media (max-width: ", ") {\n    min-width: 10rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
});
var ProductInfo = styled.div.attrs({
  className: 'd-flex flex-column ml-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var Brand = styled(Typography).attrs(props => {
  return {
    variant: 5,
    className: "" + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n"])));
var Name = styled(Typography).attrs(props => {
  return {
    variant: 5,
    className: "" + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Attrs = styled(Typography).attrs({
  variant: 5
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var SKU = styled(Typography).attrs({
  variant: 7,
  className: 'mt-0 mt-lg-2'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
});
var CTA = styled.div.attrs(props => {
  return {
    className: (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex') + " mt-auto flex-column flex-md-row "
  };
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var Label = styled.span.attrs({
  className: 'mr-4 mt-2 mt-lg-0'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: fit-content;\n  border-bottom: 1px solid ", ";\n  color: ", ";\n  padding-bottom: 2px;\n\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.hint;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.hint;
});
var Divider = styled.div.attrs(props => {
  return {
    className: (props.isLast ? 'd-none' : 'd-flex ') + " my-4"
  };
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  border-bottom: 0.1rem solid ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.grey;
});
//# sourceMappingURL=ProductCard.js.map