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

var _templateObject, _templateObject2, _templateObject3;

import React, { useMemo } from 'react';
import { customFieldsToMap, useConfigState, Link } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { useHideMobileDrawer } from '..';
export var MobileBrandList = (_ref) => {
  var {
    brands: brandsRaw,
    showOnlyFeatured = true
  } = _ref;
  var {
    customFieldKeys,
    assetKeys
  } = useConfigState();
  var hideMobileDrawer = useHideMobileDrawer();
  var brands = useMemo(() => {
    if (!showOnlyFeatured) return brandsRaw;
    return brandsRaw == null ? void 0 : brandsRaw.filter(brand => {
      var customFields = customFieldsToMap(brand.custom);
      return customFields[customFieldKeys.isFeatured];
    });
  }, [brandsRaw, customFieldKeys.isFeatured, showOnlyFeatured]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, brands == null ? void 0 : brands.map(brand => {
    var _brand$assets, _brand$name;

    return /*#__PURE__*/React.createElement(Li, {
      key: "Item__" + brand.slug + "--" + brand.name
    }, /*#__PURE__*/React.createElement(Link, {
      href: brand.slug || '#',
      passHref: true
    }, /*#__PURE__*/React.createElement(Anchor, {
      onClick: hideMobileDrawer
    }, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement("img", {
      src: (_brand$assets = brand.assets) == null ? void 0 : _brand$assets[assetKeys.brandLogo],
      loading: "lazy",
      alt: brand.name + " Logo"
    })), /*#__PURE__*/React.createElement("p", {
      className: "ml-2"
    }, (_brand$name = brand.name) == null ? void 0 : _brand$name.toLowerCase()))));
  }));
};
var Li = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  & p {\n    color: ", ";\n    text-transform: capitalize;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
});
var Anchor = styled.a.attrs({
  className: 'd-flex align-items-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var ImageWrapper = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center mb-1'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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