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

var _templateObject, _templateObject2;

/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react';
import { useProductState, useProductFunctions, useConfigState } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { VariantsCarousel } from '../VariantsCarousel';
export var SizesPreview = () => {
  var _attributeRules$attri;

  var {
    attributeRules,
    selectedVariant
  } = useProductState();
  var {
    selectVariantByCombination,
    getCombinationsForAttributeRule
  } = useProductFunctions();
  var {
    attributeKeys
  } = useConfigState();
  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 = size => () => {
    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((a, b) => sizes[a].extra.sort - sizes[b].extra.sort);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(VariantsCarousel, {
    axis: "x",
    slides: sortedSizes,
    renderSlide: size => {
      var _allPossibleSizesForS;

      var isAvailable = allPossibleSizesForSelectedColor == null ? void 0 : (_allPossibleSizesForS = allPossibleSizesForSelectedColor.combinations) == null ? void 0 : _allPossibleSizesForS[size];
      return /*#__PURE__*/React.createElement(Size, {
        isAvailable: isAvailable,
        onMouseEnter: handleHover(size)
      }, /*#__PURE__*/React.createElement("span", null, sizes[size].label));
    }
  }));
};
var Container = styled.div.attrs({
  className: 'pt-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var Size = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.hint;
}, props => props.isSelected ? props.theme.palette.hint : props.theme.palette.disabled, props => props.isAvailable ? 1 : 0.6, props => props.isAvailable ? 'all' : 'none', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map