"use strict";

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

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

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

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

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

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

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

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

var _SocialLogin = require("./SocialLogin");

var _LoginForm = require("./LoginForm");

var _RegisterForm = require("./RegisterForm");

var _Styled = require("../Common/Modals/AuthPopup/Components/Styled");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;

var LoginPage = function LoginPage(_ref) {
  var labels = _ref.labels;

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons;

  var _useState = (0, _react.useState)('Login'),
      currentForm = _useState[0],
      setCurrentForm = _useState[1];

  var RenderForms = {
    Login: /*#__PURE__*/_react["default"].createElement(_LoginForm.LoginForm, null),
    Register: /*#__PURE__*/_react["default"].createElement(_RegisterForm.RegisterForm, null)
  };
  return /*#__PURE__*/_react["default"].createElement(ColorContainer, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(FormsWrapper, null, /*#__PURE__*/_react["default"].createElement(Title, null, labels.title), /*#__PURE__*/_react["default"].createElement(SocialLoginWrap, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-lg-4 col-md-5"
  }, /*#__PURE__*/_react["default"].createElement(_SocialLogin.SocialLogin, null))), /*#__PURE__*/_react["default"].createElement(LoginForms, null, /*#__PURE__*/_react["default"].createElement(LoginWrap, null, /*#__PURE__*/_react["default"].createElement(Subtitle, null, labels.loginTitle), /*#__PURE__*/_react["default"].createElement(_LoginForm.LoginForm, null)), /*#__PURE__*/_react["default"].createElement(RegisterWrap, null, /*#__PURE__*/_react["default"].createElement(Subtitle, null, labels.registerTitle), /*#__PURE__*/_react["default"].createElement(_RegisterForm.RegisterForm, null)))), /*#__PURE__*/_react["default"].createElement(MobileForms, null, /*#__PURE__*/_react["default"].createElement(FormsHeader, null, /*#__PURE__*/_react["default"].createElement(FormsButtons, {
    isActive: currentForm === 'Login',
    onClick: function onClick() {
      return setCurrentForm('Login');
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "py-2 px-3"
  }, buttons.signIn)), /*#__PURE__*/_react["default"].createElement(FormsButtons, {
    isActive: currentForm === 'Register',
    onClick: function onClick() {
      return setCurrentForm('Register');
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "py-2 px-3"
  }, buttons.register))), /*#__PURE__*/_react["default"].createElement(FormsWrapper, null, RenderForms[currentForm]), /*#__PURE__*/_react["default"].createElement(_Styled.Separator, null, /*#__PURE__*/_react["default"].createElement(_Styled.SeparatorSpan, null, "or")), /*#__PURE__*/_react["default"].createElement("div", {
    className: "justify-content-center col-12 col-md-6"
  }, /*#__PURE__*/_react["default"].createElement(_SocialLogin.SocialLogin, null))))));
};

exports.LoginPage = LoginPage;

var ColorContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", "\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.disabled;
});

var Row = _styledComponents["default"].div.attrs({
  className: 'row d-flex justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var FormsWrapper = _styledComponents["default"].div.attrs({
  className: 'col-12 pt-4 pb-lg-5 pb-md-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Title = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  color: 'primary',
  as: 'h2',
  className: 'mb-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-transform: uppercase;\n  font-weight: bold;\n"])));

var SocialLoginWrap = _styledComponents["default"].div.attrs({
  className: 'justify-content-center mb-3 py-3 px-0'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  background-color: ", ";\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
});

var LoginForms = _styledComponents["default"].div.attrs({
  className: 'flex-row justify-content-between login-forms'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
});

var Subtitle = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  color: 'primary',
  as: 'h4',
  className: 'mb-4'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var LoginWrap = _styledComponents["default"].div.attrs({
  className: 'px-4 pt-4 pb-3 mr-2'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
});

var RegisterWrap = _styledComponents["default"].div.attrs({
  className: 'px-4 pt-4 pb-3 ml-2'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.secondary;
});

var MobileForms = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column d-lg-none justify-content-center align-items-center mb-5 px-4 pt-4 pb-5'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n  width: 100%;\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.secondary;
});

var FormsHeader = _styledComponents["default"].div.attrs({
  className: "d-flex flex-row py-2 mb-4 align-self-start"
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var FormsButtons = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", "\n  margin-left: 1rem;\n  margin-right: 1rem;\n"])), function (_ref9) {
  var isActive = _ref9.isActive,
      theme = _ref9.theme;
  return isActive && "\n    border-bottom: solid " + theme.palette.primary + ";\n    color: " + theme.palette.primary + ";\n    transition: all .2s;\n  ";
});
//# sourceMappingURL=loginPage.component.js.map