"use client";

import React, { useContext, useEffect, useState } from "react";
import task from "@img/logo-t.png";
import Image from "next/image";
import LoginStep from "@comp/LoginComponents/LoginStep";
import AppContext from "@ctx/AppContext";
import VerifyCodeStep from "@comp/LoginComponents/VerifyCodeStep";
import SignUp from "@comp/LoginComponents/SignUp";
import { useRouter } from "next/navigation";

const Login = (props) => {
  const CTX = useContext(AppContext);
  const stepLogin = CTX.state.stepLogin;
  const router = useRouter();

  useEffect(() => {
    if (typeof window !== "undefined") {
      const item = localStorage.token;
      if (!!item) {
        router.push("/home");
      }
    }
  }, []);

  return (
    <div className="pb-5">
      <div className=" rounded-b-3xl p-4 bg-backgroundPrimary-100 ">
        <div className="w-[200px] mx-auto py-10">
          <Image src={task} className="w-[200px]" />
        </div>
        <div className="text-center w-full mt-4 ">
          <h2 className=" text-textMain-100 text-xl font-bold">
            بهترین انتخاب برای رستوران ها
          </h2>
          <p className="mb-0 text-textMain-100 mt-1 ">
            {" "}
            برای ورود یا ثبت نام به اپلیکیشن مدیریت وظایف رستوران باید شماره
            تلفن همراه خود را وارد کنید
          </p>
        </div>

        <div className="flex justify-center mt-10 mb-5">
          <div className="w-[10px] h-[10px] bg-gray-900 mx-1 rounded-full"></div>
          <div className="w-[10px] h-[10px] bg-gray-400 mx-1 rounded-full"></div>
          <div className="w-[10px] h-[10px] bg-gray-400 mx-1 rounded-full"></div>
        </div>
      </div>

      {stepLogin == 0 ? (
        <LoginStep />
      ) : stepLogin == 1 ? (
        <VerifyCodeStep />
      ) : stepLogin == 2 ? (
        <SignUp />
      ) : (
        ""
      )}
    </div>
  );
};

export default Login;
