"use strict";

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

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

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

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

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

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

var _link = _interopRequireDefault(require("next/link"));

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

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

  var updateImages = _ref.updateImages,
      masterVariantId = _ref.masterVariantId;

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

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

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

  var colors = (_attributeRules$attri = attributeRules[attributeKeys.color]) == null ? void 0 : _attributeRules$attri.values;
  var colorKeys = Object.keys(colors || {});
  (0, _react.useEffect)(function () {
    selectVariantById(masterVariantId || colorKeys[0]);
  }, [masterVariantId, colors]);

  if (!colors) {
    return null;
  }

  var handleMouseEnter = function handleMouseEnter(key, images) {
    return function () {
      selectVariantByAttribute(key || colorKeys[0]);
      images && updateImages(images);
    };
  };

  return /*#__PURE__*/_react["default"].createElement(VariantsPreviewContainer, null, /*#__PURE__*/_react["default"].createElement(ColorsWrapper, null, /*#__PURE__*/_react["default"].createElement(Colors, null, colorKeys.length > 3 ? colorKeys.slice(0, 3).map(function (col, i) {
    var variant = getVariantByAttribute == null ? void 0 : getVariantByAttribute(col);
    var images = variant == null ? void 0 : variant.images;
    var hex = colors[col].extra.rgb;
    return /*#__PURE__*/_react["default"].createElement(_link["default"], {
      href: "/" + metaData.slug + "/p" + (variant != null && variant._id ? "?variant=" + variant._id : ''),
      passHref: true,
      key: "Link__" + hex + "--" + i
    }, /*#__PURE__*/_react["default"].createElement(Color, {
      key: "Color_" + hex + "--" + i,
      onMouseEnter: handleMouseEnter(col, images),
      hex: hex
    }));
  }) : colorKeys.map(function (col, i) {
    var variant = getVariantByAttribute == null ? void 0 : getVariantByAttribute(col);
    var images = variant == null ? void 0 : variant.images;
    var hex = colors[col].extra.rgb;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_link["default"], {
      href: "/" + metaData.slug + "/p" + (variant != null && variant._id ? "?variant=" + variant._id : ''),
      passHref: true,
      key: "Link__" + hex + "--" + i
    }, /*#__PURE__*/_react["default"].createElement(Color, {
      key: "Color_" + hex + "--" + i,
      onMouseEnter: handleMouseEnter(col, images),
      hex: hex
    })));
  }), colorKeys.length > 3 && /*#__PURE__*/_react["default"].createElement(More, null, " + ", colorKeys.length - 3, " more"))));
};

exports.ColorsPreview = ColorsPreview;

var VariantsPreviewContainer = _styledComponents["default"].div.attrs({
  className: ''
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  top: 0;\n  left: 0;\n  height: 3rem;\n  width: 100%;\n  background-color: ", ";\n  margin-top: -2rem;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
});

var ColorsWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Colors = _styledComponents["default"].ul.attrs({
  className: 'd-flex'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Color = _styledComponents["default"].li.attrs({
  className: 'mr-2  '
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 2rem;\n  height: 2rem;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  background: ", ";\n"])), function (props) {
  return props.hex === '#ffffff' ? '#aaa' : 'none';
}, function (props) {
  return props.hex;
});

var More = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.5rem;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map