import { createTheme, Box, CssBaseline, ThemeOptions, type Palette } from '@mui/material';
import type { Shape } from '@mui/system';
import { create as createBlockletTheme, deepmerge } from '@arcblock/ux/lib/Theme';
import { deepmergeAll } from '@arcblock/ux/lib/Util';
import { Shadows, ThemeProvider, useTheme } from '@mui/material/styles';
import React, { useMemo } from 'react';

import './index.css';
import './types';
import { typography } from './typography';
import { type PaymentThemeOptions } from '../types';

export function PaymentThemeProvider({
  children,
  theme: customTheme = {},
}: {
  children: React.ReactNode;
  theme?: PaymentThemeOptions;
}) {
  // Add defaultProps for customTheme
  const { sx: themeSX = {}, ...restTheme } = customTheme || {};
  const parentTheme = useTheme();

  const mergeTheme = useMemo(() => {
    // @ts-ignore
    const blockletTheme = parentTheme.themeName === 'ArcBlock' ? parentTheme : createBlockletTheme();
    const { mode } = blockletTheme.palette;

    // payment 在 blockletTheme 上扩展自己的配置
    let paymentThemeOptions: ThemeOptions = deepmerge(blockletTheme, {
      palette: {
        chip: {
          success: {
            text: mode === 'dark' ? '#10b981' : '#047857',
            background: mode === 'dark' ? '#022c22' : '#d1fae5',
            border: mode === 'dark' ? '#064e3b' : '#a7f3d0',
          },
          default: {
            text: mode === 'dark' ? '#adb1b8' : '#4b5563',
            background: mode === 'dark' ? '#2e3035' : '#f3f4f6',
            border: mode === 'dark' ? '#3c3f44' : '#e5e7eb',
          },
          secondary: {
            text: mode === 'dark' ? '#8b5cf6' : '#6d28d9',
            background: mode === 'dark' ? '#2e1064' : '#ede9fe',
            border: mode === 'dark' ? '#3c3f44' : '#ddd6fe',
          },
          error: {
            text: mode === 'dark' ? '#ff6369' : '#be123c',
            background: mode === 'dark' ? '#4c0519' : '#ffe4e6',
            border: mode === 'dark' ? '#881337' : '#fecdd3',
          },
          warning: {
            text: mode === 'dark' ? '#f59e0b' : '#b45309',
            background: mode === 'dark' ? '#451a03' : '#fef4c7',
            border: mode === 'dark' ? '#78350f' : '#fde68a',
          },
          info: {
            text: mode === 'dark' ? '#3b82f6' : '#1d4ed8',
            background: mode === 'dark' ? '#172554' : '#dbeafe',
            border: mode === 'dark' ? '#1e3a8a' : '#bfdbfe',
          },
        },
      },
    });

    const {
      palette,
      shape: { borderRadius },
      shadows,
    } = paymentThemeOptions as { palette: Palette; shape: Shape; shadows: Shadows };

    // 继续扩展
    paymentThemeOptions = deepmergeAll([
      paymentThemeOptions,
      {
        palette: {
          text: {
            lighter: palette.grey[400],
            link: palette.secondary.main,
          },
        },
      },
      {
        components: {
          MuiOutlinedInput: {
            styleOverrides: {
              root: {
                borderRadius,
                backgroundColor: palette.grey[50],
                '&.Mui-disabled': {
                  backgroundColor: palette.grey[100],
                },
                '.MuiOutlinedInput-notchedOutline': {
                  borderColor: palette.grey[100],
                },
                '.MuiInputBase-input': {
                  fontSize: '14px',
                  minHeight: '1.65em',
                  lineHeight: '1.65em',
                },
                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                  borderWidth: '1px',
                },
                '&.MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline': {
                  borderColor: `${palette.primary.main}`,
                },
              },
            },
          },
          MuiButton: {
            defaultProps: {
              size: 'small',
            },
            styleOverrides: {
              root: {
                fontSize: '0.875rem',
                fontWeight: 500,
                textTransform: 'none',
                boxShadow: 'none',
              },
              sizeSmall: {
                height: 32,
              },
              outlinedPrimary: {
                borderColor: palette.grey[100],
                '&:hover': {
                  borderColor: palette.grey[100],
                },
              },
            },
          },
          MuiIconButton: {
            defaultProps: {
              size: 'small',
            },
            styleOverrides: {
              root: {
                textTransform: 'none',
              },
              colorPrimary: {
                backgroundColor: palette.background.default,
              },
            },
          },
          MuiToggleButton: {
            styleOverrides: {
              root: {
                textTransform: 'none',
              },
            },
          },
          MuiTab: {
            styleOverrides: {
              root: {
                textTransform: 'none',
                fontSize: '0.875rem',
              },
            },
          },
          MuiTooltip: {
            defaultProps: {
              enterTouchDelay: 3000,
              leaveTouchDelay: 100,
            },
            styleOverrides: {
              tooltip: {
                fontSize: '0.875rem',
              },
            },
          },
          MuiPopover: {
            styleOverrides: {
              root: {
                zIndex: 1200,
              },
              paper: {
                border: `1px solid ${palette.divider}`,
                boxShadow: shadows[2],
              },
            },
          },
          MuiCssBaseline: {
            styleOverrides: {
              '.base-card': {
                padding: '20px',
                borderRadius: 1.5 * (borderRadius as number), // 12px
                background: palette.background.default,
                border: `1px solid ${palette.divider}`,
                boxShadow: shadows[1],
              },
              '.base-label': {
                color: palette.grey.A700,
                fontSize: '16px',
                fontWeight: '500',
                lineHeight: '24px',
              },
              '.base-dialog': {
                '.MuiPaper-root>.MuiDialogContent-root': {
                  paddingTop: '0',
                },
              },
              a: {
                textDecoration: 'none !important',
              },
            },
          },
          MuiRadio: {
            styleOverrides: {
              root: {
                color: palette.grey[200],
                '&:hover': {
                  background: 'none',
                },
                '&.Mui-checked': {
                  color: palette.primary.main,
                },
              },
            },
          },
          MuiCheckbox: {
            styleOverrides: {
              root: {
                color: palette.primary.main,
                '&.Mui-checked': {
                  color: palette.primary.main,
                },
              },
            },
          },
          MuiDivider: {
            styleOverrides: {
              root: {
                borderColor: palette.grey[100],
              },
            },
          },
          MuiInputBase: {
            defaultProps: {
              size: 'small',
            },
            styleOverrides: {
              root: {
                fontSize: '0.875rem',
                backgroundColor: palette.grey[50],
              },
            },
          },
          MuiInputLabel: {
            defaultProps: {
              size: 'small',
            },
            styleOverrides: {
              root: {
                fontSize: '0.875rem',
              },
            },
          },
          MuiChip: {
            styleOverrides: {
              root: {
                borderRadius: `${(borderRadius as number) * 2}px`,
                border: '1px solid transparent',
                '&.MuiChip-filledSuccess': {
                  color: palette.chip.success.text,
                  backgroundColor: palette.chip.success.background,
                  borderColor: palette.chip.success.border,
                },
                '&.MuiChip-filledDefault': {
                  color: palette.chip.default.text,
                  backgroundColor: palette.chip.default.background,
                  borderColor: palette.chip.default.border,
                },
                '&.MuiChip-filled.MuiChip-colorSecondary': {
                  color: palette.chip.secondary.text,
                  backgroundColor: palette.chip.secondary.background,
                  borderColor: palette.chip.secondary.border,
                },
                '&.MuiChip-filledError': {
                  color: palette.chip.error.text,
                  backgroundColor: palette.chip.error.background,
                  borderColor: palette.chip.error.border,
                },
                '&.MuiChip-filledWarning': {
                  color: palette.chip.warning.text,
                  backgroundColor: palette.chip.warning.background,
                  borderColor: palette.chip.warning.border,
                },
                '&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo': {
                  color: palette.chip.info.text,
                  backgroundColor: palette.chip.info.background,
                  borderColor: palette.chip.info.border,
                },
              },
            },
          },
          MuiDialog: {
            styleOverrides: {
              root: {
                zIndex: 1200,
              },
            },
          },
        },
      },
      restTheme,
    ]);

    return createTheme(paymentThemeOptions);
  }, [parentTheme, restTheme]);

  return (
    <ThemeProvider theme={mergeTheme}>
      <CssBaseline />
      <Box sx={{ height: '100%', ...themeSX }}>{children}</Box>
    </ThemeProvider>
  );
}

export { typography };