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 { Button, LazyResponsiveImage, Modal, Typography, ScrollView, Price } from '../';
import { useBasket, usePrice, useProductFunctions, useProductState, ProductQuantityStatusEnum, useUIFunctions, useConfigState, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { IconClose } from '../Icons/IconClose';
export var SelectSizeModal = props => {
  var _selectedVariant$offe, _selectedVariant$offe2, _selectedVariant$offe3, _attributeRules$attri, _selectedVariant$imag, _selectedVariant$imag2;

  var {
    open,
    handleClose,
    title,
    onSelectCallback,
    setStateSizeId,
    stateSizeId,
    onAddToBag
  } = props;
  var {
    metaData,
    selectedVariant,
    attributeRules
  } = useProductState();
  var {
    infoMessages,
    buttons
  } = useGlobalLabels();
  var {
    enqueueView
  } = useUIFunctions();
  var {
    addToBasket,
    status
  } = useBasket({
    productId: metaData == null ? void 0 : metaData._id,
    variantId: selectedVariant == null ? void 0 : selectedVariant._id,
    offerId: selectedVariant == null ? void 0 : (_selectedVariant$offe = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe._id,
    quantity: selectedVariant == null ? void 0 : selectedVariant.quantity
  });
  var {
    views,
    attributeKeys
  } = useConfigState();
  var {
    getCombinationsForAttributeRule,
    selectVariantByCombination,
    getVariantByCombination
  } = useProductFunctions();

  var handleAddToBasket = () => {
    addToBasket(1);
    enqueueView(views.bagModal, {
      selectedVariant: selectedVariant,
      metaData: metaData,
      modalState: {
        isOpen: true,
        type: 'basket'
      }
    });
    onAddToBag == null ? void 0 : onAddToBag();
    handleClose();
  };

  var {
    price,
    discountPrice
  } = usePrice({
    price: selectedVariant == null ? void 0 : (_selectedVariant$offe2 = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe2.originalPrice,
    discountedPrice: selectedVariant == null ? void 0 : (_selectedVariant$offe3 = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe3.discountedPrice
  });

  var selectVariantBySizeAndColor = (sizeId, colorId) => {
    if (sizeId === stateSizeId) return;
    setStateSizeId(sizeId);
    selectVariantByCombination(sizeId, colorId);
    onSelectCallback == null ? void 0 : onSelectCallback();
  };

  var allSizes = attributeRules == null ? void 0 : (_attributeRules$attri = attributeRules[attributeKeys.size]) == null ? void 0 : _attributeRules$attri.values;
  var sizeKeys = Object.keys(allSizes).sort((a, b) => allSizes[a].extra.sort - allSizes[b].extra.sort);
  var brandName = metaData.brand.name;
  var selectedColor = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.color);
  var allPossibleSizesForSelectedColor = getCombinationsForAttributeRule(attributeKeys.color, selectedColor == null ? void 0 : selectedColor.id);
  var isInStock = status === ProductQuantityStatusEnum.Available && !!stateSizeId;
  return /*#__PURE__*/React.createElement(Modal, {
    open: open,
    handleClose: handleClose,
    maxWidth: "88rem",
    width: "88rem",
    smallPadding: true,
    noTitlePadding: true,
    borderRadius: "normal",
    hideHeader: true,
    bottomOnMobile: true
  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(Desktop, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {},
    defaultImageWidth: "16rem",
    imagesMap: selectedVariant == null ? void 0 : (_selectedVariant$imag = selectedVariant.images) == null ? void 0 : _selectedVariant$imag[0]
  }))), /*#__PURE__*/React.createElement(Mobile, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {},
    defaultImageWidth: "16rem",
    imagesMap: selectedVariant == null ? void 0 : (_selectedVariant$imag2 = selectedVariant.images) == null ? void 0 : _selectedVariant$imag2[0]
  })), /*#__PURE__*/React.createElement(CloseButtonContainer, {
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "light",
    bordered: true,
    small: true,
    borderRadius: "circle",
    icon: /*#__PURE__*/React.createElement(IconClose, null)
  })), /*#__PURE__*/React.createElement(Content, null, Boolean(brandName) && /*#__PURE__*/React.createElement(Brand, null, brandName), /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Price, {
    size: "tiny",
    currency: price.currency,
    price: price.value,
    hideDiscountPercentage: true,
    discountedPrice: discountPrice ? discountPrice.value : undefined
  })))), /*#__PURE__*/React.createElement(SizeListContainer, null, /*#__PURE__*/React.createElement(Desktop, null, /*#__PURE__*/React.createElement(CloseButtonContainer, {
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "light",
    bordered: true,
    small: true,
    borderRadius: "circle",
    icon: /*#__PURE__*/React.createElement(IconClose, null)
  })), /*#__PURE__*/React.createElement(Content, null, brandName && /*#__PURE__*/React.createElement(Brand, null, brandName), /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Price, {
    size: "tiny",
    currency: price.currency,
    price: price.value,
    hideDiscountPercentage: true,
    discountedPrice: discountPrice ? discountPrice.value : undefined
  }))), /*#__PURE__*/React.createElement(SelectSizeLabel, null, buttons.selectSize), /*#__PURE__*/React.createElement(ScrollView, {
    overflowDirection: "x",
    lgOverflowDirection: "y",
    maxHeight: "20rem"
  }, /*#__PURE__*/React.createElement(SizeList, null, sizeKeys.map(sizeId => {
    var _getVariantByCombinat;

    var size = allSizes[sizeId];
    var isSelected = stateSizeId === sizeId;
    var isAvailable = (_getVariantByCombinat = getVariantByCombination(sizeId, selectedColor == null ? void 0 : selectedColor.id)) == null ? void 0 : _getVariantByCombinat.isAvailable;
    return /*#__PURE__*/React.createElement(Size, {
      isSelected: isSelected,
      key: sizeId
    }, /*#__PURE__*/React.createElement(Button, {
      borderRadius: "small",
      variant: isSelected ? 'primary' : 'gray',
      bordered: !isSelected,
      fullWidth: true,
      disabled: !isAvailable,
      withCrossOver: true,
      type: "button",
      onClick: () => selectVariantBySizeAndColor(sizeId, selectedColor == null ? void 0 : selectedColor.id)
    }, size.label));
  }))), /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
    type: "button",
    onClick: handleAddToBasket,
    variant: !isInStock ? 'disabled' : 'primary',
    borderRadius: "large",
    disabled: !isInStock,
    fullWidth: true
  }, isInStock && buttons.addToBag, !stateSizeId && buttons.chooseSize, status === ProductQuantityStatusEnum.OutOfStock && infoMessages.outOfStock, status === ProductQuantityStatusEnum.MaxQuantityReached && infoMessages.maxQuantity)))));
};
var Content = styled.div.attrs({
  className: 'col-auto col-20'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -0.5rem;\n  right: 0;\n  width: fit-content;\n  z-index: 1;\n\n  & button {\n    padding: 0;\n\n    min-width: 3rem;\n    min-height: 3rem;\n    max-width: 3rem;\n    max-height: 3rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-width: 0;\n  }\n\n  & span {\n    position: static;\n  }\n\n  & svg {\n    height: 1.2rem;\n  }\n"])));
var Row = styled.div.attrs({
  className: 'row'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  align-items: stretch;\n  position: relative;\n"])));
var Brand = styled(Typography).attrs({
  as: 'h3',
  variant: 'base'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Title = styled(Typography).attrs({
  as: 'h2',
  className: 'mb-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  font-size: 2.2rem;\n\n  @media (min-width: ", ") {\n    width: 77%;\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.lg.min;
});
var SizeListContainer = styled.div.attrs({
  className: 'col-12 col-lg-6'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    display: flex;\n    flex-direction: column;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var SelectSizeLabel = styled.p.attrs({
  className: 'my-2 mt-lg-auto'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var SizeList = styled.div.attrs({
  className: 'row g-3 g-lg-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  flex-wrap: nowrap !important;\n\n  @media (min-width: ", ") {\n    flex-wrap: wrap !important;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var Size = styled.div.attrs({
  className: 'col-auto col-lg-4'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  min-width: max(21.6%, 8.5rem);\n\n  @media (max-width: ", ") {\n    & button:hover {\n      background: ", " !important;\n    }\n  }\n\n  @media (min-width: ", ") {\n    min-width: none;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.max;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.lg.min;
});
var Desktop = styled.div.attrs({
  className: 'd-none d-lg-block'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose([""])));
var Mobile = styled.div.attrs({
  className: 'd-lg-none'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
var ButtonContainer = styled.div.attrs({
  className: 'mt-3 pt-3 mt-lg-0'
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose([""])));
var ImageContainer = styled.div.attrs({
  className: 'col-auto col-lg-6'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  min-width: 16rem;\n\n  @media (min-width: ", ") {\n    min-width: none;\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map