"use strict";

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

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

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

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

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

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

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

var _utils = require("./utils");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var Content = function Content(_ref) {
  var activeTab = _ref.activeTab,
      setActiveTab = _ref.setActiveTab,
      labels = _ref.labels,
      content = _ref.content;
  var palette = (0, _lib.useConfigState)().theme.palette;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(TabContainers, null, /*#__PURE__*/_react["default"].createElement(Title, {
    isActive: activeTab === 'Details',
    onClick: function onClick() {
      return setActiveTab('Details');
    }
  }, labels.productDescription), /*#__PURE__*/_react["default"].createElement(Title, {
    isActive: activeTab === 'Delivery',
    onClick: function onClick() {
      return setActiveTab('Delivery');
    }
  }, labels.deliveryInfo.tabTitle)), /*#__PURE__*/_react["default"].createElement(ContentWrapper, null, activeTab === 'Details' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, content == null ? void 0 : content.map(function (info, index) {
    var _info$content;

    return /*#__PURE__*/_react["default"].createElement("div", {
      dangerouslySetInnerHTML: {
        __html: (_info$content = info == null ? void 0 : info.content) != null ? _info$content : ''
      },
      key: "Info__" + (info.name || index)
    });
  })), activeTab === 'Delivery' && /*#__PURE__*/_react["default"].createElement("div", {
    dangerouslySetInnerHTML: {
      __html: (0, _utils.formatDeliveryHTML)({
        content: labels.deliveryInfo.content,
        linkColor: palette.danger
      })
    }
  })));
};

exports.Content = Content;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var TabContainers = _styledComponents["default"].div.attrs({
  className: 'mb-4 d-flex'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 3,
  className: 'mr-3 d-none d-md-block'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
  return props.isActive ? props.theme.palette.primary : props.theme.palette.hint;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

var ContentWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    padding: 0 2rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.sm.max;
});
//# sourceMappingURL=index.js.map