"use strict";

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

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

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

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

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

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

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

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

var _Components = require("./Components");

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

var _brands = require("./brands.hook");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var Brands = function Brands(_ref) {
  var defaultTopBrandsImage = _ref.defaultTopBrandsImage,
      popularBrandsTitle = _ref.popularBrandsTitle,
      findBrands = _ref.findBrands;

  var _useBrands = (0, _brands.useBrands)(),
      data = _useBrands.data;

  var _useScrollTo = (0, _lib.useScrollTo)(),
      scrollTo = _useScrollTo.scrollTo;

  var _useState = (0, _react.useState)(data),
      brandGroups = _useState[0],
      setBrandGroups = _useState[1];

  var _useState2 = (0, _react.useState)(''),
      query = _useState2[0],
      setQuery = _useState2[1];

  (0, _react.useEffect)(function () {
    setBrandGroups(data);
  }, [data]);
  (0, _react.useEffect)(function () {
    if (!(query != null && query.trim())) {
      setBrandGroups(data);
      return;
    }

    var timeout = setTimeout(function () {
      var q = query.trim().toLowerCase();
      var transQ = (0, _lib.transliterate)(q) || '';
      var result = brandGroups == null ? void 0 : brandGroups.map(function (group) {
        return (0, _extends2["default"])({}, group, {
          brands: group.brands.filter(function (brand) {
            var name = brand.name.toLowerCase();
            return name.includes(q) || name.includes(transQ);
          })
        });
      });
      setBrandGroups(result);
    }, 300);
    return function () {
      return clearTimeout(timeout);
    };
  }, [query]);

  var scrollToGroup = function scrollToGroup(container) {
    if (!container) return;
    scrollTo((0, _lib.getElementOffset)(container).top - 80);
  };

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(TopBrandsContainer, null, /*#__PURE__*/_react["default"].createElement(Title, null, popularBrandsTitle), /*#__PURE__*/_react["default"].createElement(_Components.TopBrands, {
    defaultBackgroundImage: defaultTopBrandsImage
  })), /*#__PURE__*/_react["default"].createElement(GroupsContainer, null, /*#__PURE__*/_react["default"].createElement(_Components.BrandListSearch, {
    title: findBrands,
    query: query,
    setQuery: setQuery
  }), /*#__PURE__*/_react["default"].createElement(Header, null, data == null ? void 0 : data.map(function (group) {
    if (!group.brands.length) return null;
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: "Header__" + group.key,
      className: "col-auto"
    }, /*#__PURE__*/_react["default"].createElement(HeaderElement, {
      onClick: function onClick() {
        return scrollToGroup(group.containerRef.current);
      }
    }, group.key));
  })), brandGroups == null ? void 0 : brandGroups.map(function (group) {
    return /*#__PURE__*/_react["default"].createElement(_Components.BrandsGroup, {
      key: "Group__" + group.key,
      groupKey: group.key,
      brands: group.brands,
      containerRef: group.containerRef
    });
  })));
};

exports.Brands = Brands;

var Container = _styledComponents["default"].div.attrs({
  className: 'container d-lg-flex my-5 pb-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var GroupsContainer = _styledComponents["default"].section.attrs({
  className: 'pl-lg-4 ml-lg-4'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    width: calc(100% - 40rem);\n    position: relative;\n\n    &:before {\n      content: '';\n      height: 100%;\n      width: 0.1rem;\n      background-color: ", ";\n      position: absolute;\n      left: 0;\n      top: 0;\n    }\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.light;
});

var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'mb-2',
  as: 'h1',
  variant: 3
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  /* font-size: 2.2rem; */\n"])));

var TopBrandsContainer = _styledComponents["default"].aside(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    width: 40rem;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
});

var Header = _styledComponents["default"].div.attrs({
  className: 'row gx-4 gy-3 justify-content-center justify-content-lg-start'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  margin-bottom: -2rem;\n"])));

var HeaderElement = _styledComponents["default"].button.attrs({
  className: 'p-0'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-transform: uppercase;\n\n  color: #005b86 !important;\n  min-height: 0 !important;\n  font-size: 2.2rem;\n  line-height: 1 !important;\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
//# sourceMappingURL=brands.component.js.map