"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SizesPreview = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _lib = require("@sentecacommerce-theme/lib");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _VariantsCarousel = require("../VariantsCarousel");

var _templateObject, _templateObject2;

var SizesPreview = function SizesPreview() {
  var _attributeRules$attri;

  var _useProductState = (0, _lib.useProductState)(),
      attributeRules = _useProductState.attributeRules,
      selectedVariant = _useProductState.selectedVariant;

  var _useProductFunctions = (0, _lib.useProductFunctions)(),
      selectVariantByCombination = _useProductFunctions.selectVariantByCombination,
      getCombinationsForAttributeRule = _useProductFunctions.getCombinationsForAttributeRule;

  var _useConfigState = (0, _lib.useConfigState)(),
      attributeKeys = _useConfigState.attributeKeys;

  var sizes = (_attributeRules$attri = attributeRules[attributeKeys.size]) == null ? void 0 : _attributeRules$attri.values;
  var sizeKeys = Object.keys(sizes || {});
  var selectedColor = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.color);

  var handleHover = function handleHover(size) {
    return function () {
      if (!selectedColor) return;
      selectVariantByCombination(size, selectedColor.id);
    };
  };

  var allPossibleSizesForSelectedColor = getCombinationsForAttributeRule(attributeKeys.color, selectedColor == null ? void 0 : selectedColor.id);
  if (sizeKeys.length < 2) return null;
  var sortedSizes = Object.keys(sizes).sort(function (a, b) {
    return sizes[a].extra.sort - sizes[b].extra.sort;
  });
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_VariantsCarousel.VariantsCarousel, {
    axis: "x",
    slides: sortedSizes,
    renderSlide: function renderSlide(size) {
      var _allPossibleSizesForS;

      var isAvailable = allPossibleSizesForSelectedColor == null ? void 0 : (_allPossibleSizesForS = allPossibleSizesForSelectedColor.combinations) == null ? void 0 : _allPossibleSizesForS[size];
      return /*#__PURE__*/_react["default"].createElement(Size, {
        isAvailable: isAvailable,
        onMouseEnter: handleHover(size)
      }, /*#__PURE__*/_react["default"].createElement("span", null, sizes[size].label));
    }
  }));
};

exports.SizesPreview = SizesPreview;

var Container = _styledComponents["default"].div.attrs({
  className: 'pt-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));

var Size = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  border: 0.1rem solid\n    ", ";\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"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette.hint;
}, function (props) {
  return props.isSelected ? props.theme.palette.hint : props.theme.palette.disabled;
}, function (props) {
  return props.isAvailable ? 1 : 0.6;
}, function (props) {
  return props.isAvailable ? 'all' : 'none';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map