"use strict";

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

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

exports.__esModule = true;
exports.DropdownItem = exports.BrandsSectionList = void 0;

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

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

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

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

var _reactMasonryCss = _interopRequireDefault(require("react-masonry-css"));

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

var _FeaturedBrands = require("../FeaturedBrands");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

var BrandsSectionList = function BrandsSectionList(_ref) {
  var sections = _ref.sections,
      isActive = _ref.isActive,
      defaultFeaturedBrandsImage = _ref.defaultFeaturedBrandsImage;

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

  var _useMemo = (0, _react.useMemo)(function () {
    var _sections$, _sections$$items, _sections$$items$find, _data$items, _data$items2;

    var data = sections == null ? void 0 : (_sections$ = sections[0]) == null ? void 0 : (_sections$$items = _sections$.items) == null ? void 0 : (_sections$$items$find = _sections$$items.find(function (item) {
      return item.type === _lib.SectionItemDTOTypeEnum.Brand;
    })) == null ? void 0 : _sections$$items$find.data;
    var result = data == null ? void 0 : (_data$items = data.items) == null ? void 0 : _data$items.reduce(function (map, brand) {
      var _brand$name, _brand$name$trim, _brand$name$trim$, _extends2;

      var _char = brand == null ? void 0 : (_brand$name = brand.name) == null ? void 0 : (_brand$name$trim = _brand$name.trim()) == null ? void 0 : (_brand$name$trim$ = _brand$name$trim[0]) == null ? void 0 : _brand$name$trim$.toLowerCase();

      if (!_char) return map;
      var currentArray = map[_char] || [];
      if (currentArray.length > 17) return map;
      return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[_char] = [].concat(currentArray, [brand]), _extends2));
    }, {});
    var cols = [];
    var brandKeys = Object.keys(result || {}).sort();
    brandKeys.forEach(function (brandKey) {
      var brandsCollection = result[brandKey];
      cols.push({
        key: brandKey,
        brands: brandsCollection
      });
    });
    var featured = (data == null ? void 0 : (_data$items2 = data.items) == null ? void 0 : _data$items2.filter(function (b) {
      var customField = (0, _lib.customFieldsToMap)(b.custom || []);
      return customField[customFieldKeys.isFeatured];
    })) || [];
    return {
      brands: cols,
      featuredBrands: featured
    };
  }, [sections, customFieldKeys.isFeatured]),
      brands = _useMemo.brands,
      featuredBrands = _useMemo.featuredBrands;

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Relative, null, /*#__PURE__*/_react["default"].createElement(_reactMasonryCss["default"], {
    breakpointCols: 5,
    className: "Masonry--grid",
    columnClassName: "Masonry--column"
  }, brands.map(function (data, index) {
    var _data$brands;

    return /*#__PURE__*/_react["default"].createElement(BrandContainer, {
      isActive: isActive,
      key: "Brand__" + index
    }, /*#__PURE__*/_react["default"].createElement(DropdownItem, {
      as: "span",
      isHeader: true
    }, data.key), (_data$brands = data.brands) == null ? void 0 : _data$brands.map(function (brand) {
      return /*#__PURE__*/_react["default"].createElement(_lib.Link, {
        key: 'Sub DropdownItem-' + brand.name + brand.slug,
        href: brand.slug || '/',
        passHref: true
      }, /*#__PURE__*/_react["default"].createElement(DropdownItem, null, brand.name));
    }));
  }))), /*#__PURE__*/_react["default"].createElement(FeaturedBrandsContainer, {
    isActive: isActive
  }, Boolean(featuredBrands.length) && /*#__PURE__*/_react["default"].createElement(_FeaturedBrands.FeaturedBrands, {
    isActive: isActive,
    brands: featuredBrands,
    defaultBackground: defaultFeaturedBrandsImage
  })));
};

exports.BrandsSectionList = BrandsSectionList;

var Relative = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var Animation = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: 0;\n  transform: translateY(-1rem);\n  transition: transform 0.1s, opacity 0.1s;\n  transition-delay: 0s;\n\n  ", "\n"])), function (props) {
  return props.isActive && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      opacity: 1;\n      transform: translateY(0);\n      transition: transform 0.3s ease, opacity 0.2s linear;\n      transition-delay: 0.2s;\n    "])));
});

var AllBrands = (0, _styledComponents["default"])(Animation).attrs({
  className: 'd-flex align-items-center',
  as: 'a'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.4rem;\n  line-height: 1.4;\n  padding-left: 2rem;\n  cursor: pointer;\n  color: ", ";\n  font-weight: bold;\n\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 20%;\n  text-align: left;\n\n  & svg {\n    width: 1.8rem;\n    margin-left: 0.4rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

var Container = _styledComponents["default"].div.attrs({
  className: 'mx-auto'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: calc((100% / 6) * 4);\n\n  & .Masonry--grid {\n    display: -webkit-box; /* Not needed if autoprefixing */\n    display: -ms-flexbox; /* Not needed if autoprefixing */\n    display: flex;\n    margin-left: -2rem; /* gutter size offset */\n    width: auto;\n  }\n\n  & .Masonry--column {\n    padding-left: 2rem; /* gutter size */\n    background-clip: padding-box;\n  }\n"])));

var BrandContainer = (0, _styledComponents["default"])(Animation)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var FeaturedBrandsContainer = (0, _styledComponents["default"])(Animation)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 14rem;\n  z-index: 100;\n  background: ", ";\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
});

var DropdownItem = _styledComponents["default"].a(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.4rem;\n  line-height: 1.4;\n  cursor: pointer;\n  color: ", ";\n  font-weight: 500;\n  text-align: left;\n  display: block;\n  text-decoration: none;\n  text-transform: uppercase;\n\n  ", "\n\n  ", "\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (props) {
  return !props.isHeader && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      :hover {\n        color: ", ";\n        transition: color 0.2s;\n      }\n    "])), props.theme.palette.primary);
}, function (props) {
  return props.isHeader && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      margin-top: 1.3rem;\n      margin-bottom: 1.3rem;\n      color: ", ";\n      font-size: 1.6rem;\n    "])), props.theme.palette.primary);
});

exports.DropdownItem = DropdownItem;
//# sourceMappingURL=index.js.map