import ContactFormModal from "@ui_kit/ContactForm";
import ImageCrop from "@ui_kit/Modal/ImageCrop";
import dayjs from "dayjs";
import "dayjs/locale/ru";
import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup";
import { ViewPage } from "./pages/ViewPublicationPage";
import { BrowserRouter, Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
import "./index.css";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import Landing from "./pages/Landing/Landing";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import { Result } from "./pages/ResultPage/Result";
import { ResultSettings } from "./pages/ResultPage/ResultSettings";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import Main from "./pages/main";
import EditPage from "./pages/startPage/EditPage";
import { clearAuthToken, getMessageFromFetchError, useUserFetcher } from "@frontend/kitui";
import { clearUserData, setUser, useUserStore } from "@root/user";
import { enqueueSnackbar } from "notistack";


dayjs.locale("ru");

const routeslink = [
    { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
    { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true, },
    { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
    { path: "/result", page: <Result />, header: true, sidebar: true },
    { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
    { path: "/install", page: <InstallQuiz />, header: true, sidebar: true },
] as const;

export default function App() {
    const userId = useUserStore((state) => state.userId);
    const location = useLocation()
    const navigate = useNavigate()

    useUserFetcher({
        url: `https://hub.pena.digital/user/${userId}`,
        userId,
        onNewUser: setUser,
        onError: (error) => {
            const errorMessage = getMessageFromFetchError(error);
            if (errorMessage) {
                enqueueSnackbar(errorMessage);
                clearUserData();
                clearAuthToken();
            }
        },
    });
     if (location.state?.redirectTo)
         return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />

    return (
        <>
            <ContactFormModal />
            {location.state?.backgroundLocation && (
                <Routes>
                    <Route path="/signin" element={<SigninDialog />} />
                    <Route path="/signup" element={<SignupDialog />} />
                </Routes>
            )}

            <Routes location={location.state?.backgroundLocation || location}>
                {routeslink.map((e, i) => (
                    <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
                ))}
                <Route path="edit" element={<EditPage />} />
                <Route path="crop" element={<ImageCrop />} />
                <Route path="/" element={<Landing />} />
                <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
                <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />/>

                <Route path="/view" element={<ViewPage />} />
            </Routes>
        </>
    );
}
