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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import Router from 'next/router';
import styled, { css } from 'styled-components';
import { Typography } from '../../../../Common';
import { useCheckoutFormStep } from '@sentecacommerce-theme/lib';
export var StepTitle = (_ref) => {
  var {
    step,
    title,
    link,
    number,
    isPrev
  } = _ref;
  var {
    updateStep,
    currentStep
  } = useCheckoutFormStep();
  var isActive = currentStep === step;
  var isNext = !isPrev && !isActive;

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

    if (link) {
      Router.push(link);
      return;
    }

    updateStep(step);
  };

  return /*#__PURE__*/React.createElement(Container, {
    onClick: handleClick,
    isActive: isActive,
    isNext: isNext,
    isPrev: isPrev
  }, /*#__PURE__*/React.createElement(Number, null, number), /*#__PURE__*/React.createElement(Title, null, title));
};
var Number = styled.span.attrs({
  className: 'mr-2 d-flex align-items-center justify-content-center'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 2.4rem;\n  height: 2.4rem;\n  border-radius: 50%;\n  background: ", ";\n  color: ", ";\n  font-size: 1.2rem;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
var Title = styled(Typography).attrs({
  as: 'h2',
  variant: 7
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  text-transform: uppercase;\n"])));
var Container = styled.a.attrs({
  className: 'mr-3 pb-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), props => props.isActive && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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    "])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}), props => props.isNext && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n      cursor: auto;\n    "]))), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map