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

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

import React, { useState } from 'react';
import styled from 'styled-components';
import { useGlobalLabels } from '@sentecacommerce-theme/lib';
import { Typography } from '../Common/Typography';
import { SocialLogin } from './SocialLogin';
import { LoginForm } from './LoginForm';
import { RegisterForm } from './RegisterForm';
import { Separator, SeparatorSpan } from '../Common/Modals/AuthPopup/Components/Styled';
export var LoginPage = (_ref) => {
  var {
    labels
  } = _ref;
  var {
    buttons
  } = useGlobalLabels();
  var [currentForm, setCurrentForm] = useState('Login');
  var RenderForms = {
    Login: /*#__PURE__*/React.createElement(LoginForm, null),
    Register: /*#__PURE__*/React.createElement(RegisterForm, null)
  };
  return /*#__PURE__*/React.createElement(ColorContainer, null, /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(FormsWrapper, null, /*#__PURE__*/React.createElement(Title, null, labels.title), /*#__PURE__*/React.createElement(SocialLoginWrap, null, /*#__PURE__*/React.createElement("div", {
    className: "col-lg-4 col-md-5"
  }, /*#__PURE__*/React.createElement(SocialLogin, null))), /*#__PURE__*/React.createElement(LoginForms, null, /*#__PURE__*/React.createElement(LoginWrap, null, /*#__PURE__*/React.createElement(Subtitle, null, labels.loginTitle), /*#__PURE__*/React.createElement(LoginForm, null)), /*#__PURE__*/React.createElement(RegisterWrap, null, /*#__PURE__*/React.createElement(Subtitle, null, labels.registerTitle), /*#__PURE__*/React.createElement(RegisterForm, null)))), /*#__PURE__*/React.createElement(MobileForms, null, /*#__PURE__*/React.createElement(FormsHeader, null, /*#__PURE__*/React.createElement(FormsButtons, {
    isActive: currentForm === 'Login',
    onClick: () => setCurrentForm('Login')
  }, /*#__PURE__*/React.createElement("span", {
    className: "py-2 px-3"
  }, buttons.signIn)), /*#__PURE__*/React.createElement(FormsButtons, {
    isActive: currentForm === 'Register',
    onClick: () => setCurrentForm('Register')
  }, /*#__PURE__*/React.createElement("span", {
    className: "py-2 px-3"
  }, buttons.register))), /*#__PURE__*/React.createElement(FormsWrapper, null, RenderForms[currentForm]), /*#__PURE__*/React.createElement(Separator, null, /*#__PURE__*/React.createElement(SeparatorSpan, null, "or")), /*#__PURE__*/React.createElement("div", {
    className: "justify-content-center col-12 col-md-6"
  }, /*#__PURE__*/React.createElement(SocialLogin, null))))));
};
var ColorContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background-color: ", "\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.disabled;
});
var Row = styled.div.attrs({
  className: 'row d-flex justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var FormsWrapper = styled.div.attrs({
  className: 'col-12 pt-4 pb-lg-5 pb-md-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Title = styled(Typography).attrs({
  color: 'primary',
  as: 'h2',
  className: 'mb-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n  font-weight: bold;\n"])));
var SocialLoginWrap = styled.div.attrs({
  className: 'justify-content-center mb-3 py-3 px-0'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: ", ";\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
var LoginForms = styled.div.attrs({
  className: 'flex-row justify-content-between login-forms'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.lg.min;
});
var Subtitle = styled(Typography).attrs({
  color: 'primary',
  as: 'h4',
  className: 'mb-4'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var LoginWrap = styled.div.attrs({
  className: 'px-4 pt-4 pb-3 mr-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background-color: ", ";\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.secondary;
});
var RegisterWrap = styled.div.attrs({
  className: 'px-4 pt-4 pb-3 ml-2'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background-color: ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.secondary;
});
var MobileForms = styled.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 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  width: 100%;\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.secondary;
});
var FormsHeader = styled.div.attrs({
  className: "d-flex flex-row py-2 mb-4 align-self-start"
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
var FormsButtons = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  ", "\n  margin-left: 1rem;\n  margin-right: 1rem;\n"])), (_ref9) => {
  var {
    isActive,
    theme
  } = _ref9;
  return isActive && "\n    border-bottom: solid " + theme.palette.primary + ";\n    color: " + theme.palette.primary + ";\n    transition: all .2s;\n  ";
});
//# sourceMappingURL=loginPage.component.js.map