"use client";

import { GET_LOGIN_ROUTE } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { Button, Stack, Typography, Zoom } from "@mui/material";
import Link from "next/link";
import { useEffect, useState } from "react";

const Page = ({ searchParams }) => {
    const { username } = searchParams;
    const [login, setLogin] = useState(0);
    const request = useRequest();

    useEffect(() => {
        const login = async () => {
            try {
                await request(`${GET_LOGIN_ROUTE}?username=${username}`);
                setLogin(1);
            } catch (error) {
                setLogin(2);
            }
        };

        login();
    }, []);

    const retry = async () => {
        setLogin(0);
        try {
            await request(`${GET_LOGIN_ROUTE}?username=${username}`);
            setLogin(1);
        } catch (error) {
            setLogin(2);
        }
    };

    return (
        <Stack alignItems={"center"} justifyContent={"center"} sx={{ height: "100%" }} spacing={2}>
            <Typography variant="h5">
                {login === 0
                    ? "درحال دریافت مجوز برای ارتباط با سرور..."
                    : login === 1
                      ? "ارتباط با سرور برقرار شد."
                      : "ارتباط با سرور برقرار نشد. مشکلی وجود دارد."}
            </Typography>
            <Zoom in={login === 1}>
                <Button component={Link} href="/">
                    ورود به سامانه
                </Button>
            </Zoom>
            <Zoom in={login === 2}>
                <Button onClick={retry}>تلاش مجدد</Button>
            </Zoom>
        </Stack>
    );
};
export default Page;
