"use strict";

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

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

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

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

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

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

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

var _ = require("..");

var _templateObject, _templateObject2, _templateObject3;

var MobileBrandList = function MobileBrandList(_ref) {
  var brandsRaw = _ref.brands,
      _ref$showOnlyFeatured = _ref.showOnlyFeatured,
      showOnlyFeatured = _ref$showOnlyFeatured === void 0 ? true : _ref$showOnlyFeatured;

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

  var hideMobileDrawer = (0, _.useHideMobileDrawer)();
  var brands = (0, _react.useMemo)(function () {
    if (!showOnlyFeatured) return brandsRaw;
    return brandsRaw == null ? void 0 : brandsRaw.filter(function (brand) {
      var customFields = (0, _lib.customFieldsToMap)(brand.custom);
      return customFields[customFieldKeys.isFeatured];
    });
  }, [brandsRaw, customFieldKeys.isFeatured, showOnlyFeatured]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, brands == null ? void 0 : brands.map(function (brand) {
    var _brand$assets, _brand$name;

    return /*#__PURE__*/_react["default"].createElement(Li, {
      key: "Item__" + brand.slug + "--" + brand.name
    }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
      href: brand.slug || '#',
      passHref: true
    }, /*#__PURE__*/_react["default"].createElement(Anchor, {
      onClick: hideMobileDrawer
    }, /*#__PURE__*/_react["default"].createElement(ImageWrapper, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: (_brand$assets = brand.assets) == null ? void 0 : _brand$assets[assetKeys.brandLogo],
      loading: "lazy",
      alt: brand.name + " Logo"
    })), /*#__PURE__*/_react["default"].createElement("p", {
      className: "ml-2"
    }, (_brand$name = brand.name) == null ? void 0 : _brand$name.toLowerCase()))));
  }));
};

exports.MobileBrandList = MobileBrandList;

var Li = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & p {\n    color: ", ";\n    text-transform: capitalize;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.hint;
});

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

var ImageWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center mb-1'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 5.4rem;\n  height: 4rem;\n\n  & img {\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
//# sourceMappingURL=index.js.map