import {ApolloProvider} from "@apollo/client";
import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react';
import {ConfigProvider} from "antd";
import enLocale from "antd/es/locale/en_US";
import dayjs from "../utils/day";
import 'dayjs/locale/en';
import React from "react";
import {useTranslation} from "react-i18next";
import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
import client from "../utils/GraphQLClient";
import App from "./App";
import * as Sentry from "@sentry/react";

import themeProvider from "./themeProvider";

dayjs.locale("en");

const config = {
    core: {
        authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
        key: "anon",
    },
};
export const factory = SplitSdk(config);


function AppContainer() {
    const {t} = useTranslation();

    return (
        <ApolloProvider client={client}>
            <ConfigProvider
                //componentSize="small"
                input={{autoComplete: "new-password"}}
                locale={enLocale}
                theme={themeProvider}
                form={{
                    validateMessages: {
                        // eslint-disable-next-line no-template-curly-in-string
                        required: t("general.validation.required", {label: "${label}"}),
                    },
                }}
            >
                <GlobalLoadingBar/>
                <SplitFactoryProvider factory={factory}>
                    <App/>
                </SplitFactoryProvider>
            </ConfigProvider>
        </ApolloProvider>
    );
}

export default Sentry.withProfiler(AppContainer);