import type { ThemeConfig } from 'antd/es/config-provider';

const colors = {
  background: '#ffffff',
  border: '#e4e4e7',
  foreground: '#09090b',
  muted: '#f4f4f5',
  mutedForeground: '#71717a',
  primary: '#18181b',
  primaryHover: '#27272a',
  surfaceSubtle: '#fafafa',
};

export const gatewayAntdTheme: ThemeConfig = {
  token: {
    colorPrimary: colors.primary,
    colorPrimaryHover: colors.primaryHover,
    colorPrimaryActive: colors.foreground,
    colorInfo: colors.primary,
    colorLink: colors.primary,
    colorLinkHover: colors.primaryHover,
    colorBorder: colors.border,
    colorText: colors.primaryHover,
    colorTextBase: colors.primaryHover,
    colorTextPlaceholder: colors.mutedForeground,
    colorBgContainer: colors.background,
    colorBgElevated: colors.background,
    colorFillSecondary: colors.muted,
    colorFillTertiary: colors.surfaceSubtle,
    controlItemBgActive: colors.muted,
    controlItemBgActiveHover: colors.border,
    borderRadius: 6,
    controlHeight: 36,
    fontFamily: 'inherit',
    fontSize: 14,
  },
  components: {
    DatePicker: {
      activeBorderColor: colors.primary,
      activeShadow: '0 0 0 3px rgba(24, 24, 27, 0.12)',
      cellActiveWithRangeBg: colors.muted,
      cellHoverWithRangeBg: colors.surfaceSubtle,
      cellRangeBorderColor: colors.border,
      hoverBorderColor: colors.primaryHover,
    },
    Select: {
      activeBorderColor: colors.primary,
      activeOutlineColor: 'rgba(24, 24, 27, 0.12)',
      hoverBorderColor: colors.primaryHover,
      multipleItemBg: colors.muted,
      multipleItemBorderColor: colors.border,
      optionActiveBg: colors.surfaceSubtle,
      optionSelectedBg: colors.muted,
      optionSelectedColor: colors.foreground,
      optionSelectedFontWeight: 600,
    },
    Slider: {
      dotActiveBorderColor: colors.primary,
      handleActiveColor: colors.primary,
      handleActiveOutlineColor: 'rgba(24, 24, 27, 0.12)',
      handleColor: colors.primary,
      trackBg: colors.primary,
      trackHoverBg: colors.primaryHover,
    },
  },
};
