import React, { useMemo } from 'react';
import { createTheme, ThemeProvider } from '@mui/material';
import { darkPalette, lightPalette } from '@/theme/palette';
import { useTranslation } from 'react-i18next';
import { typography } from '@/theme/typography';

export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const { i18n } = useTranslation();

  const theme = useMemo(() => {
    const direction = i18n.dir(i18n.language);

    return createTheme({
      components: {
        MuiSelect: {
          styleOverrides: {
            root: {
              textAlign: 'left',
            },
            select: {
              textAlign: 'left',
            },
          },
        },
      },
      direction: direction,
      colorSchemes: {
        light: {
          palette: lightPalette,
        },
        dark: {
          palette: darkPalette,
        },
      },
      cssVariables: {
        colorSchemeSelector: 'class',
      },
      components: {
        MuiTextField: {
          defaultProps: {
            variant: 'outlined',
            fullWidth: true,
          },
        },
        MuiButton: {
          defaultProps: {
            size: 'large',
            fullWidth: true,
            variant: 'contained',
          },
        },
      },
      spacing: 8,
      typography: typography,
    });
  }, [i18n]);

  return (
    <ThemeProvider theme={theme} defaultMode="light">
      {children}
    </ThemeProvider>
  );
};