"use strict";

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

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

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

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var FeaturedBrands = function FeaturedBrands(_ref) {
  var brands = _ref.brands,
      defaultBackground = _ref.defaultBackground,
      isActive = _ref.isActive;

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

  var _useLocalLabels = (0, _lib.useLocalLabels)(),
      seeAllBrands = _useLocalLabels.seeAllBrands;

  return /*#__PURE__*/_react["default"].createElement(FeaturedBrandList, null, /*#__PURE__*/_react["default"].createElement(Col, {
    className: "d-flex align-items-center "
  }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: "/brands",
    passHref: true
  }, /*#__PURE__*/_react["default"].createElement(AllBrands, {
    as: "a",
    isActive: isActive
  }, seeAllBrands))), /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(_Common.CarouselComponent, {
    slideWidth: "20%",
    withArrows: true,
    slides: brands,
    renderSlide: function renderSlide(brand) {
      var _brand$assets;

      var logo = (_brand$assets = brand.assets) == null ? void 0 : _brand$assets[assetKeys.brandLogo];
      return /*#__PURE__*/_react["default"].createElement(FeaturedBrand, null, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
        href: brand.slug || '/',
        passHref: true
      }, /*#__PURE__*/_react["default"].createElement("a", null, /*#__PURE__*/_react["default"].createElement("img", {
        loading: "lazy",
        src: logo,
        alt: brand.name
      }))));
    }
  })));
};

exports.FeaturedBrands = FeaturedBrands;

var FeaturedBrandList = _styledComponents["default"].ol.attrs({
  className: 'd-flex align-items-stretch pt-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n\n  & button {\n    background: rgba(255, 255, 255, 0.7);\n    min-height: 3rem !important;\n    height: 3rem !important;\n    width: 3rem !important;\n    min-width: 3rem !important;\n    line-height: 0 !important;\n    padding: 0.5rem !important;\n\n    &:hover {\n      background: rgba(255, 255, 255, 0.8);\n    }\n  }\n\n  & button:first-child > svg {\n    margin-left: -0.3rem;\n  }\n\n  & button:last-child > svg {\n    margin-right: -0.2rem;\n  }\n\n  & button > svg {\n    width: 1.6rem !important;\n    height: 1.6rem !important;\n  }\n"])));

var FeaturedBrand = _styledComponents["default"].li.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 10.8rem;\n\n  & img {\n    max-width: 100%;\n    max-height: 8rem;\n    width: auto;\n    height: auto;\n    font-weight: bold;\n  }\n"])));

var AllBrands = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center',
  as: 'a'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.4rem;\n  line-height: 1.4;\n  cursor: pointer;\n  color: ", ";\n  font-weight: bold;\n\n  opacity: 0;\n  transform: translateY(-1rem);\n  transition: transform 0.1s, opacity 0.1s;\n  transition-delay: 0s;\n\n  ", "\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isActive && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      opacity: 1;\n      transform: translateY(0);\n      transition: transform 0.2s ease, opacity 0.2s linear;\n      transition-delay: 0.2s;\n    "])));
});

var Col = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n  width: 20%;\n\n  &:last-of-type {\n    width: 80%;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])));
//# sourceMappingURL=index.js.map