"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var VariantSelector = function VariantSelector(_ref) {
  var _attributeRules$attri;

  var stateSizeId = _ref.stateSizeId,
      resetSizeState = _ref.resetSizeState,
      renderSizes = _ref.renderSizes;

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

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

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

  var selectedColor = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.color);
  var allColors = attributeRules == null ? void 0 : (_attributeRules$attri = attributeRules[attributeKeys.color]) == null ? void 0 : _attributeRules$attri.values;

  var selectByColor = function selectByColor(colorId) {
    var _getCombinationsForAt;

    selectVariantByAttribute(colorId);
    var isSelectedSizeAvailableForThisColor = (_getCombinationsForAt = getCombinationsForAttributeRule(attributeKeys.color, colorId)) == null ? void 0 : _getCombinationsForAt.combinations[stateSizeId];
    if (!isSelectedSizeAvailableForThisColor) resetSizeState();
  };

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Common.ScrollView, {
    maxHeight: "auto",
    overflowDirection: "x",
    lgOverflowDirection: "y"
  }, /*#__PURE__*/_react["default"].createElement(VariantContainer, null, Object.keys(allColors).map(function (currentColorKey) {
    var _getVariantByAttribut, _getVariantByAttribut2;

    var image = getVariantByAttribute == null ? void 0 : (_getVariantByAttribut = getVariantByAttribute(currentColorKey)) == null ? void 0 : (_getVariantByAttribut2 = _getVariantByAttribut.images) == null ? void 0 : _getVariantByAttribut2[0];
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: currentColorKey
    }, /*#__PURE__*/_react["default"].createElement(VariantThumbnail, {
      selected: currentColorKey === (selectedColor == null ? void 0 : selectedColor.id),
      onClick: function onClick() {
        return selectByColor(currentColorKey);
      }
    }, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
      breakpointSizes: {},
      defaultImageWidth: "100px",
      imagesMap: image,
      alt: allColors[currentColorKey].label,
      title: allColors[currentColorKey].label
    })));
  }))), renderSizes())));
};

exports.VariantSelector = VariantSelector;

var Container = _styledComponents["default"].div.attrs({
  className: 'row'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var VariantContainer = _styledComponents["default"].div.attrs({
  className: 'pb-3 row g-2 g-lg-2 flex-nowrap flex-lg-wrap'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > div {\n    width: 11rem;\n  }\n\n  @media (min-width: ", ") {\n    & > div {\n      width: 20%;\n    }\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var VariantThumbnail = _styledComponents["default"].div.attrs({
  className: 'p-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  cursor: pointer;\n\n  & img {\n    transform: scale(0.9);\n  }\n\n  ", "\n  ", "\n"])), function (props) {
  return props.selected && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      border: 0.1rem solid ", ";\n      border-radius: 0.4rem;\n    "])), props.theme.palette.primary);
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      pointer-events: none;\n      opacity: 0.1;\n    "])));
});
//# sourceMappingURL=index.js.map