"use strict";

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

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

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

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

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

var _router = _interopRequireDefault(require("next/router"));

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var StepTitle = function StepTitle(_ref) {
  var step = _ref.step,
      title = _ref.title,
      link = _ref.link,
      number = _ref.number,
      isPrev = _ref.isPrev;

  var _useCheckoutFormStep = (0, _lib.useCheckoutFormStep)(),
      updateStep = _useCheckoutFormStep.updateStep,
      currentStep = _useCheckoutFormStep.currentStep;

  var isActive = currentStep === step;
  var isNext = !isPrev && !isActive;

  var handleClick = function handleClick() {
    if (isNext) return;

    if (link) {
      _router["default"].push(link);

      return;
    }

    updateStep(step);
  };

  return /*#__PURE__*/_react["default"].createElement(Container, {
    onClick: handleClick,
    isActive: isActive,
    isNext: isNext,
    isPrev: isPrev
  }, /*#__PURE__*/_react["default"].createElement(Number, null, number), /*#__PURE__*/_react["default"].createElement(Title, null, title));
};

exports.StepTitle = StepTitle;

var Number = _styledComponents["default"].span.attrs({
  className: 'mr-2 d-flex align-items-center justify-content-center'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 2.4rem;\n  height: 2.4rem;\n  border-radius: 50%;\n  background: ", ";\n  color: ", ";\n  font-size: 1.2rem;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
});

var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h2',
  variant: 7
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: bold;\n  text-transform: uppercase;\n"])));

var Container = _styledComponents["default"].a.attrs({
  className: 'mr-3 pb-3'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  & > h2 {\n    display: none;\n  }\n\n  ", "\n\n  ", "\n\n  @media(min-width: ", ") {\n    & > h2 {\n      display: block;\n    }\n  }\n"])), function (props) {
  return props.isActive && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      position: relative;\n\n      &:after {\n        content: '';\n        display: block;\n        height: 0.1rem;\n        width: 100%;\n        background: ", ";\n        position: absolute;\n        bottom: 0;\n      }\n\n      & > h2 {\n        display: block;\n      }\n    "])), function (_ref4) {
    var theme = _ref4.theme;
    return theme.palette.primary;
  });
}, function (props) {
  return props.isNext && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      opacity: 0.5;\n      cursor: auto;\n    "])));
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map