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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from 'react';
import { useProductState, useProductFunctions, useConfigState } from '@sentecacommerce-theme/lib';
import Link from 'next/link';
import styled from 'styled-components';
import { Typography } from '../../../../Common';
export var ColorsPreview = (_ref) => {
  var _attributeRules$attri;

  var {
    updateImages,
    masterVariantId
  } = _ref;
  var {
    attributeRules,
    metaData
  } = useProductState();
  var {
    getVariantByAttribute,
    selectVariantById,
    selectVariantByAttribute
  } = useProductFunctions();
  var {
    attributeKeys
  } = useConfigState();
  var colors = (_attributeRules$attri = attributeRules[attributeKeys.color]) == null ? void 0 : _attributeRules$attri.values;
  var colorKeys = Object.keys(colors || {});
  useEffect(() => {
    selectVariantById(masterVariantId || colorKeys[0]);
  }, [masterVariantId, colors]);

  if (!colors) {
    return null;
  }

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

  return /*#__PURE__*/React.createElement(VariantsPreviewContainer, null, /*#__PURE__*/React.createElement(ColorsWrapper, null, /*#__PURE__*/React.createElement(Colors, null, colorKeys.length > 3 ? colorKeys.slice(0, 3).map((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.createElement(Link, {
      href: "/" + metaData.slug + "/p" + (variant != null && variant._id ? "?variant=" + variant._id : ''),
      passHref: true,
      key: "Link__" + hex + "--" + i
    }, /*#__PURE__*/React.createElement(Color, {
      key: "Color_" + hex + "--" + i,
      onMouseEnter: handleMouseEnter(col, images),
      hex: hex
    }));
  }) : colorKeys.map((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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link, {
      href: "/" + metaData.slug + "/p" + (variant != null && variant._id ? "?variant=" + variant._id : ''),
      passHref: true,
      key: "Link__" + hex + "--" + i
    }, /*#__PURE__*/React.createElement(Color, {
      key: "Color_" + hex + "--" + i,
      onMouseEnter: handleMouseEnter(col, images),
      hex: hex
    })));
  }), colorKeys.length > 3 && /*#__PURE__*/React.createElement(More, null, " + ", colorKeys.length - 3, " more"))));
};
var VariantsPreviewContainer = styled.div.attrs({
  className: ''
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  top: 0;\n  left: 0;\n  height: 3rem;\n  width: 100%;\n  background-color: ", ";\n  margin-top: -2rem;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
});
var ColorsWrapper = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Colors = styled.ul.attrs({
  className: 'd-flex'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Color = styled.li.attrs({
  className: 'mr-2  '
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  background: ", ";\n"])), props => props.hex === '#ffffff' ? '#aaa' : 'none', props => props.hex);
var More = styled(Typography).attrs({
  variant: 5
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.5rem;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map