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

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { productsApi, ProductProvider } from '@sentecacommerce-theme/lib';
import { ColorsPreview } from '../ColorsPreview';
import { SizesPreview } from '../SizesPreview';
import { UpdateProductPrice } from '../UpdateProductPrice';
export var VariantsLoader = (_ref) => {
  var {
    slug,
    updateImages,
    updatePrice,
    priceState,
    showVariants
  } = _ref;
  var {
    data,
    isLoading
  } = productsApi.useProduct(slug);
  if (!data || isLoading) return null;
  return /*#__PURE__*/React.createElement(ProductProvider, {
    product: data
  }, /*#__PURE__*/React.createElement(ColorsPreview, {
    masterVariantId: data.masterVariantId,
    updateImages: updateImages
  }), /*#__PURE__*/React.createElement(FadeIn, {
    isVisible: showVariants
  }, /*#__PURE__*/React.createElement(OnlyWhenHover, null, showVariants && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SizesPreview, null), /*#__PURE__*/React.createElement(UpdateProductPrice, {
    priceState: priceState,
    updatePrice: updatePrice
  })))));
};
var FadeIn = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);\n  transition-delay: ", ";\n  opacity: ", ";\n"])), props => props.isVisible ? '0.3s' : 0, props => props.isVisible ? 1 : 0);
var OnlyWhenHover = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media (hover: hover) {\n    display: block;\n    position: relative;\n    z-index: 1;\n  }\n"])));
//# sourceMappingURL=index.js.map