import { useAuth } from "@/contexts/auth-context";
import {
  createTheme,
  MantineProvider as MantineProviderCore,
} from "@mantine/core";
import ColorSchemeProvider from "./color-scheme-provider";
import { useState, useEffect, useMemo } from "react";

const commonInputStyles = {
  label: {
    padding: 5,
  },
  root: {
    margin: "0",
  },
};

const theme = createTheme({
  defaultRadius: "sm",
  fontFamily: '"Inter", sans-serif',
  headings: { fontFamily: '"League Spartan", sans-serif' },
  components: {
    TextInput: {
      styles: commonInputStyles,
    },
    DateTimePicker: {
      styles: commonInputStyles,
    },
    Input: {
      styles: commonInputStyles,
    },
    Select: {
      styles: commonInputStyles,
    },
    Autocomplete: {
      styles: commonInputStyles,
    },
    DateTiemPicker: {
      styles: {
        root: {
          zIndex: 1000,
        },
        input: {
          zIndex: 1000,
          backgroundColor: "red",
        },
      },
    },
  },
});

const MantineProvider = ({ children }: { children: React.ReactNode }) => {
  const { metadata } = useAuth();
  const [isHydrated, setIsHydrated] = useState(false);

  useEffect(() => {
    setIsHydrated(true);
  }, []);

  const colorScheme = isHydrated ? metadata.colorScheme || "auto" : "auto";
  const primaryColor = isHydrated ? metadata.accentColor || "blue" : "blue";

  const themeWithPrimaryColor = useMemo(
    () => ({ ...theme, primaryColor }),
    [primaryColor]
  );

  return (
    <MantineProviderCore
      defaultColorScheme={colorScheme}
      theme={themeWithPrimaryColor}
    >
      <ColorSchemeProvider>{children}</ColorSchemeProvider>
    </MantineProviderCore>
  );
};

export default MantineProvider;