import { useEffect, useState } from "react";
import { useAppContext } from "../context/Index";
import { Login } from "../components/Forms/Login/Login";
import { Sign } from "../components/Forms/SignUp/Sign";
import styles from "./Styles.module.css";
import { useNavigate } from "react-router-dom";

export const LoginPage = () => {
  const navigate = useNavigate();
  const { loginOrRegister } = useAppContext();
  const [showLogin, setShowLogin] = useState(true);

  useEffect(() => {
    sessionStorage.clear();
  }, []);

  const handlelogin = async ({ mobile }) => {
    await loginOrRegister({ mobile });
    navigate("/seat-limit");
  };

  const handleSignup = async ({ name, mobile }) => {
    const res = await loginOrRegister({ name, mobile });
    console.log("registered", res);
    setShowLogin(true);
  };

  return (
    <div className={styles.login}>
      {showLogin ? (
        <Login onClick={handlelogin} onSwitch={() => setShowLogin(false)} />
      ) : (
        <Sign onClick={handleSignup} onSwitch={() => setShowLogin(true)} />
      )}
    </div>
  );
};
