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);
    const isEnglish = i18n.language?.startsWith('en');
    const fontFamily = isEnglish ? 'iranyekanEnNum' : 'iranyekan';

    return createTheme({
      direction: direction,
      colorSchemes: {
        light: {
          palette: lightPalette,
        },
        dark: {
          palette: darkPalette,
        },
      },
      cssVariables: {
        colorSchemeSelector: 'class',
      },
      spacing: 8,
      shape: {
        borderRadius: 8,
      },
      typography: {
        fontFamily: [fontFamily, 'sans-serif'].join(','),
        ...typography,
      },
      components: {
        MuiButton: {
          defaultProps: {
            size: 'large',
            fullWidth: true,
            variant: 'contained',
            sx: {
              textTransform: 'none',
            },
          },
        },
        MuiTextField: {
          defaultProps: {
            variant: 'outlined',
            fullWidth: true,
          },
        },
        MuiSelect: {
          styleOverrides: {
            root: {
              textAlign: 'left',
            },
            select: {
              textAlign: 'left',
            },
          },
        },
      },
    });
  }, [i18n, i18n.language]);

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