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 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";
import { Userpilot } from "userpilot";

// Initialize Userpilot
if (import.meta.env.DEV) {
  Userpilot.initialize("NX-69145f08");
}

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);