import { RefineThemes } from '@refinedev/antd';
import { ConfigProvider } from 'antd';
import type { ThemeConfig } from 'antd';
import { PropsWithChildren } from 'react';

const themeConfig: ThemeConfig = {
  ...RefineThemes.Blue,
  token: {
    ...RefineThemes.Blue.token,
    colorPrimary: '#1677FF',
    colorError: '#fa541c',
    colorPrimaryText: 'rgba(0, 0, 0, 0.85)',
    colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
    colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
    colorBgContainer: '#F7F8F9',
    colorBgLayout: '#F0F2F5',
    colorBorderBg: '#E8E9EA',
    borderRadius: 6,
    fontFamily:
      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
  },
  components: {
    Typography: {
      colorText: 'rgba(0, 0, 0, 0.85)',
      colorTextDescription: 'rgba(0, 0, 0, 0.65)',
      colorTextDisabled: 'rgba(0, 0, 0, 0.45)',
    },
    Card: {
      colorBgContainer: '#FFFFFF',
      headerBg: '#FAFAFA',
    },
    Table: {
      colorBgContainer: '#fff',
    },
    Input: {
      colorBgContainer: '#fff',
    },
    InputNumber: {
      colorBgContainer: '#fff',
    },
    Select: {
      colorBgContainer: '#fff',
    },
    Form: {
      labelFontSize: 14,
    },
  },
};

export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
  children,
}) => {
  return <ConfigProvider theme={themeConfig}>{children}</ConfigProvider>;
};
