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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled, { css } from 'styled-components';
import { useProductState, useProductFunctions, useConfigState } from '@sentecacommerce-theme/lib';
import { LazyResponsiveImage, ScrollView } from '../../../Common';
export var VariantSelector = (_ref) => {
  var _attributeRules$attri;

  var {
    stateSizeId,
    resetSizeState,
    renderSizes
  } = _ref;
  var {
    selectedVariant,
    attributeRules
  } = useProductState();
  var {
    selectVariantByAttribute,
    getVariantByAttribute,
    getCombinationsForAttributeRule
  } = useProductFunctions();
  var {
    attributeKeys
  } = useConfigState();
  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 = colorId => {
    var _getCombinationsForAt;

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

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ScrollView, {
    maxHeight: "auto",
    overflowDirection: "x",
    lgOverflowDirection: "y"
  }, /*#__PURE__*/React.createElement(VariantContainer, null, Object.keys(allColors).map(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.createElement("div", {
      key: currentColorKey
    }, /*#__PURE__*/React.createElement(VariantThumbnail, {
      selected: currentColorKey === (selectedColor == null ? void 0 : selectedColor.id),
      onClick: () => selectByColor(currentColorKey)
    }, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
      breakpointSizes: {},
      defaultImageWidth: "100px",
      imagesMap: image,
      alt: allColors[currentColorKey].label,
      title: allColors[currentColorKey].label
    })));
  }))), renderSizes())));
};
var Container = styled.div.attrs({
  className: 'row'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var VariantContainer = styled.div.attrs({
  className: 'pb-3 row g-2 g-lg-2 flex-nowrap flex-lg-wrap'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  & > div {\n    width: 11rem;\n  }\n\n  @media (min-width: ", ") {\n    & > div {\n      width: 20%;\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var VariantThumbnail = styled.div.attrs({
  className: 'p-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), props => props.selected && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: 0.1rem solid ", ";\n      border-radius: 0.4rem;\n    "])), props.theme.palette.primary), props => props.disabled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      opacity: 0.1;\n    "]))));
//# sourceMappingURL=index.js.map