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

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

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { getElementOffset, transliterate, useScrollTo } from '@sentecacommerce-theme/lib';
import { BrandsGroup, TopBrands, BrandListSearch } from './Components';
import { Typography } from '../Common';
import { useBrands } from './brands.hook';
export var Brands = (_ref) => {
  var {
    defaultTopBrandsImage,
    popularBrandsTitle,
    findBrands
  } = _ref;
  var {
    data
  } = useBrands();
  var {
    scrollTo
  } = useScrollTo();
  var [brandGroups, setBrandGroups] = useState(data);
  var [query, setQuery] = useState('');
  useEffect(() => {
    setBrandGroups(data);
  }, [data]);
  useEffect(() => {
    if (!(query != null && query.trim())) {
      setBrandGroups(data);
      return;
    }

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

  var scrollToGroup = container => {
    if (!container) return;
    scrollTo(getElementOffset(container).top - 80);
  };

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(TopBrandsContainer, null, /*#__PURE__*/React.createElement(Title, null, popularBrandsTitle), /*#__PURE__*/React.createElement(TopBrands, {
    defaultBackgroundImage: defaultTopBrandsImage
  })), /*#__PURE__*/React.createElement(GroupsContainer, null, /*#__PURE__*/React.createElement(BrandListSearch, {
    title: findBrands,
    query: query,
    setQuery: setQuery
  }), /*#__PURE__*/React.createElement(Header, null, data == null ? void 0 : data.map(group => {
    if (!group.brands.length) return null;
    return /*#__PURE__*/React.createElement("div", {
      key: "Header__" + group.key,
      className: "col-auto"
    }, /*#__PURE__*/React.createElement(HeaderElement, {
      onClick: () => scrollToGroup(group.containerRef.current)
    }, group.key));
  })), brandGroups == null ? void 0 : brandGroups.map(group => /*#__PURE__*/React.createElement(BrandsGroup, {
    key: "Group__" + group.key,
    groupKey: group.key,
    brands: group.brands,
    containerRef: group.containerRef
  }))));
};
var Container = styled.div.attrs({
  className: 'container d-lg-flex my-5 pb-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var GroupsContainer = styled.section.attrs({
  className: 'pl-lg-4 ml-lg-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.light;
});
var Title = styled(Typography).attrs({
  className: 'mb-2',
  as: 'h1',
  variant: 3
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  /* font-size: 2.2rem; */\n"])));
var TopBrandsContainer = styled.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    width: 40rem;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
var Header = styled.div.attrs({
  className: 'row gx-4 gy-3 justify-content-center justify-content-lg-start'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  margin-bottom: -2rem;\n"])));
var HeaderElement = styled.button.attrs({
  className: 'p-0'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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