import { Flex, Stack, Text } from "@mantine/core";
import { useGetForms } from "@/services/api";
import { FormCard } from "@/components/Forms/Card";
import type { Form } from "@/services/resources/forms";
import { t } from "@/config/i18n";
import { useSearchParams } from "react-router";
import { useEffect } from "react";
import { showNotification } from "@mantine/notifications";

export function Home() {
    const { data: allForms } = useGetForms(new URLSearchParams("?current_season=true"));
    const [searchParams] = useSearchParams();

    useEffect(() => {
        if (searchParams.get("sessionExpired")) {
            showNotification({
                title: t("session expired", { capfirst: true }),
                message: t("your session has expired please log in again", { capfirst: true }),
                color: "red",
                autoClose: 5000,
            });
        }
        if (searchParams.get("userNotAllowed")) {
            showNotification({
                title: t("user not allowed", { capfirst: true }),
                message: t("your keycloak user has no roles, please contact your administrator", {
                    capfirst: true,
                }),
                color: "red",
                autoClose: 5000,
            });
        }
    }, [searchParams]);

    return (
        <Stack mt="lg">
            <Flex gap="md" wrap="wrap" justify="center">
                {allForms && allForms?.length > 0 ? (
                    allForms.map((form: Form) => <FormCard form={form} key={form.id} />)
                ) : (
                    <Text mt="lg" size="lg">
                        {t("there is no contract for now", { capfirst: true })}
                    </Text>
                )}
            </Flex>
        </Stack>
    );
}