import React, { useState, useCallback, useEffect } from "react";
import "./App.css";
import SignupModal from "./components/SignupModal.jsx";
import Login from "./components/Login.jsx";
import "bootstrap/dist/css/bootstrap.min.css";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import RecentLogins from "./components/RecentLogins.jsx";
import Button from "react-bootstrap/Button";
import UserAccount from "./components/UserAccount";
import PasswordReminderModal from "./components/PasswordReminderModal";
import { useDispatch, useSelector } from "react-redux";
import { subscribeAuth } from "./backend/backend";
import { profileLinkSet } from "./features/accountPage/accountPageSlice";

function App() {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = subscribeAuth();
    return unsubscribe;
  }, []);

  //Handle the modal
  const [show, setShow] = useState(false);

  function handleClose() {
    setShow(false);
  }

  function handleShow() {
    setShow(true);
  }

  const handleCloseCallback = useCallback(handleClose, []);

  //get the first and lastName for the route of the profile
  const name =
    (user && user.displayName && user.displayName.trim().split(" ")) || [];

  const lastName = name.pop();

  const firstName = name.join(" ");

  const profileLink = `/${lastName}.${firstName}`;

  useEffect(
    () => dispatch(profileLinkSet(profileLink)),
    [profileLink, dispatch]
  );

  //handling the password reminder button
  const [isModalSignup, setModalSignup] = useState(true);

  function handleClickPasswordReminderBtn() {
    setModalSignup(false);
    handleShow();
  }

  if (user.isLoading) {
    return <div>...Loading</div>;
  }

  if (user.isSignedIn && !user.error) {
    if (user.isEmailVerified) return <UserAccount />;
    else return <></>;
  } else {
    return (
      <Col className='bg-200 vh-100'>
        <Row className='h-100 align-items-center'>
          <Col
            lg={{ span: 5, offset: 1 }}
            className='d-flex justify-content-center'
          >
            <RecentLogins />
          </Col>
          <Col lg={5} className='bg-200 d-flex justify-content-center'>
            <div className='login p-3 bg-light'>
              <Login
                onClickForgottenPswd={handleClickPasswordReminderBtn}
              ></Login>

              <hr />

              <Button
                variant='success'
                size='lg'
                className='d-block w-60 mx-auto mt-4'
                onClick={handleShow}
              >
                <b>Create New Account</b>
              </Button>
            </div>
          </Col>

          <SignupModal
            show={show && isModalSignup}
            onHide={handleCloseCallback}
            onExit={() => setModalSignup(true)}
          ></SignupModal>

          <PasswordReminderModal
            show={show && !isModalSignup}
            onHide={handleClose}
            onExit={() => setModalSignup(true)}
          />
        </Row>
      </Col>
    );
  }
}

export default App;
