"use strict";

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

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

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

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

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

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

var _Typography = require("../Typography");

var _BreadcrumbsPlaceholder = require("../BreadcrumbsPlaceholder");

var _Icons = require("../Icons");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var Breadcrumbs = function Breadcrumbs(props) {
  var data = props.data,
      isLoading = props.isLoading,
      noPaddingLeft = props.noPaddingLeft;

  if (!(data != null && data.length) || isLoading) {
    return /*#__PURE__*/_react["default"].createElement(Container, {
      noPadding: noPaddingLeft
    }, /*#__PURE__*/_react["default"].createElement(_BreadcrumbsPlaceholder.BreadcrumbsPlaceholder, null));
  }

  return /*#__PURE__*/_react["default"].createElement(Container, {
    noPadding: noPaddingLeft
  }, data.map(function (bc, i) {
    var isLast = i === data.length - 1;
    var isPrev = i === data.length - 2;
    return /*#__PURE__*/_react["default"].createElement(BreadcrumbListItem, {
      key: bc.name + "__" + i
    }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
      href: bc.link,
      passHref: true
    }, /*#__PURE__*/_react["default"].createElement("a", null, isPrev && /*#__PURE__*/_react["default"].createElement(MobileIcon, null, /*#__PURE__*/_react["default"].createElement(_Icons.IconLongArrow, null)), /*#__PURE__*/_react["default"].createElement(BreadcrumbLink, {
      isLast: isLast
    }, "" + bc.name))), !isLast && /*#__PURE__*/_react["default"].createElement(Divider, null));
  }));
};

exports.Breadcrumbs = Breadcrumbs;

var Divider = _styledComponents["default"].span.attrs({
  className: 'd-none d-md-block mx-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  &:after {\n    content: '/';\n  }\n"])));

var MobileIcon = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center d-md-none mr-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > svg {\n    width: 2rem;\n    transform: rotate(180deg);\n  }\n"])));

var Container = _styledComponents["default"].ul.attrs(function (props) {
  return {
    className: "d-flex mt-3  container-fluid " + (props.noPadding && 'pl-md-0')
  };
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex-wrap: wrap;\n  line-height: 1;\n  position: relative;\n  z-index: 10;\n"])));

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

var BreadcrumbLink = (0, _styledComponents["default"])(_Typography.Typography).attrs(function (_ref) {
  var isLast = _ref.isLast;
  return {
    as: 'a',
    variant: '7',
    className: (isLast ? 'd-flex' : 'd-none d-md-flex') + " align-items-center"
  };
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    font-size: 1.6rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
});
//# sourceMappingURL=index.js.map