import { ThemeProvider as StyledComponentsThemeProvider } from "styled-components";
import { theme as antdTheme, ConfigProvider } from "antd";
import React from "react";

const customTheme = {
  token: {
    // Seed Tokens
    colorPrimary: "#003cc1",
    colorSuccess: "#87d068",
    danger: "green",
    error: "#ff424e",
    colorWarning: "#faad14", // Warning color (example)
    colorInfo: "#1677ff", // Info color (example)
    colorText: "#515158", // Text color
    colorTextSecondary: "#ffffff", // Secondary text color
    colorBg: "#ffffff", // Background color
    colorBorder: "#c4c4cf", // Border color
    borderRadius: "8px", // Border radius
    boxShadowBase: "0px 2px 0px 0px rgba(0, 0, 0, 0.04)", // Box shadow
    fontSizeBase: "14px", // Font size
    fontFamily: '"GilroyB"', // Font family

    // Disabled state tokens
    colorDisabledBg: "#c4c4cf", // Disabled background color
    colorDisabled: "rgba(0, 60, 193, 0.5)", // Disabled color for primary
    colorDisabledDanger: "rgba(255, 66, 78, 0.5)", // Disabled color for danger
    colorDisabledSuccess: "rgba(135, 208, 104, 0.5)", // Disabled color for success
    // ... other disabled state tokens
  },
  // Component-specific tokens (if needed)
  components: {
    Button: {
      padding: "0 15px",
      height: "40px",
      // ... other component-specific tokens
    },
    // ... other components
  },
};

const ThemeProvider = ({ children }) => {
  // Refer to https://ant.design/docs/react/customize-theme for customizing the theme
  // Combine Ant Design tokens with your base theme
  const combinedTheme = {
    antdToken: {
      colorPrimary: "#003CC1",
      colorAction: "#020c1e",
      colorSuccess: "#87D068",
      colorError: "#FF424E",
      colorWarning: "#FFB700",
      colorInfo: "#1677ff",
      colorText: "#515158",
      colorTextSecondary: "#ffffff",
      colorTextPlaceholder: "#808089",
      colorBorder: "#c4c4cf",
      borderRadius: 8,
      fontSize: 14,
      fontFamily: '"GilroyR"',
      controlHeight: 40, // The height of the basic controls such as buttons and input boxes
      colorSplit: "#c4c4cf", // Used as the color of separator
    },
    colors: {
      verisBgPrimary: "#f2f6fa",
      verisBgSecondary: "#f9fdff",
      verisBgWhite: "#ffffff",
      verisBorder: "#c7e6f5",
      errorColor: "#FF424E",
      colorText: "#515158",
      colorBorder: "#c4c4cf",
    },
  };

  return (
    <ConfigProvider
      theme={{
        token: combinedTheme.antdToken,
      }}
    >
      <StyledComponentsThemeProvider theme={combinedTheme}>{children}</StyledComponentsThemeProvider>
    </ConfigProvider>
  );
};

export default ThemeProvider;