"use client";

import { FC, useLayoutEffect } from "react";
import { useRouter } from "next/navigation";
import { CircularProgress, Box, Grid } from "@mui/material";
import { ZammadWrapper } from "app/(main)/_components/ZammadWrapper";

export const Setup: FC = () => {
  const router = useRouter();
  useLayoutEffect(() => {
    const fingerprint = localStorage.getItem("fingerprint");
    if (!fingerprint || fingerprint === "") {
      const newFingerprint = `${Math.floor(
        Math.random() * 100000000,
      )}`.padStart(8, "0");
      localStorage.setItem("fingerprint", newFingerprint);
    }
    setTimeout(() => router.push("/"), 4000);
  }, [router]);

  return (
    <Box sx={{ width: "100%" }}>
      <Grid
        container
        direction="column"
        sx={{ height: 500 }}
        justifyContent="center"
        alignContent="center"
        alignItems="center"
      >
        <Grid item>
          <CircularProgress size={80} color="success" />
        </Grid>
      </Grid>
      <ZammadWrapper path="/auth/sso" hideSidebar={false} />
    </Box>
  );
};